TypeScript - 기능: 초보자 가이드
안녕하세요, 미래의 프로그래머 여러분! TypeScript의 세계로 여러분을 안내하게 되어 기쁩니다. 컴퓨터 과학을 오랫동안 가르쳐온 사람으로서 TypeScript의 강력하고 혁신적인 면모를 직접 목격해왔습니다. 그麼, TypeScript의 놀라운 기능을 탐구해보겠습니다!
TypeScript는 무엇인가요?
기능에 들어가기 전에 TypeScript가 무엇인지 간단히 이해해보겠습니다. 레고 블록으로 집을 짓는 것을 상상해보세요. JavaScript는 다양한 색상의 블록이 든 큰 상자 같은 것이고, TypeScript는 그 같은 블록에 특별한 지침과 규칙을 추가한 것입니다. 이는 더 안정적이고 오류 없는 구조를 짓는 데 도움이 됩니다!
이제 TypeScript의 특별한 기능을 탐구해보겠습니다.
타입 어노테이션
타입 어노테이션의 기본
타입 어노테이션은 상자에 라벨을 붙여 내용을 설명하는 것과 같습니다. TypeScript에서는 이를 통해 컴퓨터에게 우리가 사용하는 데이터의 종류를 알립니다.
let myName: string = "Alice";
let myAge: number = 30;
let isStudent: boolean = true;이 예제에서 우리는 TypeScript에게 다음과 같이 알립니다:
-
myName은 텍스트(문자열)만 포함해야 합니다 -
myAge은 숫자여야 합니다 -
isStudent은 참이나 거짓(불리언) 중 하나입니다
이는 누군가의 이름으로 수학을 시도하는 같은 어리석은 실수를 방지하는 데 도움이 됩니다!
왜 유용한가요
요리를 하다가 우연히 스파게티 소스에 설탕을 뿌리는 일이 상상해보세요. 타입 어노테이션은 이런 종류의 실수를 코드에서 사전에 잡아내어 시간과 고통을 절약해줍니다!
인터페이스
인터페이스는 객체의 블루프린트입니다. 객체가 가져야 할 구조를 정의합니다.
interface Person {
name: string;
age: number;
greet(): void;
}
let student: Person = {
name: "Bob",
age: 20,
greet: function() {
console.log("Hello, I'm " + this.name);
}
};여기서 우리는 Person 인터페이스를 만들어 Person 객체가 반드시 가져야 할 name, age, 그리고 greet 함수를 정의했습니다. 이는 누군가가 이 프로그램에서 사람이 되고 싶다면 이러한 것들이 필요하다는 것을 말하는 것과 같습니다!
클래스
클래스는 객체의 쿠키 cutter입니다. 같은 구조와 동작을 가진 여러 객체를 만들 수 있게 합니다.
class Dog {
name: string;
breed: string;
constructor(name: string, breed: string) {
this.name = name;
this.breed = breed;
}
bark() {
console.log(this.name + " says Woof!");
}
}
let myDog = new Dog("Buddy", "Golden Retriever");
myDog.bark(); // 출력: Buddy says Woof!이 예제에서 우리는 Dog 클래스를 만들었습니다. 이는 강아지 객체를 만드는 템플릿입니다. 각 강아지는 이름과 품종을 가지고 있으며,吠える 수 있습니다. 각각의 강아지의 속성과 메서드를 개별적으로 작성하는 것보다 훨씬 쉬운 방법입니다!
상속
상속은 부모로부터 자식에게 특성을 전하는 것과 같습니다. 프로그래밍에서는 클래스가 다른 클래스로부터 속성과 메서드를 상속받을 수 있습니다.
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move() {
console.log(this.name + " is moving.");
}
}
class Cat extends Animal {
meow() {
console.log(this.name + " says Meow!");
}
}
let myCat = new Cat("Whiskers");
myCat.move(); // 출력: Whiskers is moving.
myCat.meow(); // 출력: Whiskers says Meow!여기서 Cat은 Animal을 상속받습니다. 이는 Cat이 Animal의 모든 것을 가지며 (name 속성과 move 메서드), 자신만의 독특한 meow 메서드를 가지는 것을 의미합니다.
열거형(Enums)
열거형은 사전 정의된 옵션 목록입니다. 어떤 것은 고정된 값을 가질 수 있는 경우에 유용합니다.
enum DaysOfWeek {
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday,
Sunday
}
let today: DaysOfWeek = DaysOfWeek.Wednesday;
console.log(today); // 출력: 2 (零から数えて3番目の要素)열거형은 코드의 가독성을 높이고, 변수가 가질 수 있는 가능한 값을 제한하여 오류를 방지하는 데 도움이 됩니다.
제네릭
제네릭은 카드 게임의 와일드 카드와 같습니다. 다양한 타입과 작동할 수 있는 유연하고 재사용 가능한 함수와 클래스를 작성할 수 있게 합니다.
function identity<T>(arg: T): T {
return arg;
}
let output1 = identity<string>("Hello");
let output2 = identity<number>(42);
console.log(output1); // 출력: Hello
console.log(output2); // 출력: 42이 예제에서 <T>은 타입 변수입니다. 이는 identity 함수가 어떤 타입과도 작동하면서 여전히 타입 안전을 유지할 수 있게 합니다.
연합 타입
연합 타입은 여러 개의 성격을 가진 것과 같습니다. 변수가 여러 타입 중 하나를 가질 수 있게 합니다.
let mixedType: string | number;
mixedType = "Hello";
console.log(mixedType); // 출력: Hello
mixedType = 42;
console.log(mixedType); // 출력: 42이는 데이터의 타입이 무엇인지 확신이 없지만, 몇 가지 특정 타입 중 하나일 것이라고 알고 싶을 때 유용합니다.
타입 가드
타입 가드는 코드의 보안 점검과 같습니다. 특정 코드 블록 내에서 변수의 타입을 좁게 만들어주는 데 도움이 됩니다.
function printLength(obj: string | string[]) {
if (typeof obj === "string") {
console.log("Length of string: " + obj.length);
} else {
console.log("Length of array: " + obj.length);
}
}
printLength("Hello"); // 출력: Length of string: 5
printLength(["a", "b", "c"]); // 출력: Length of array: 3타입 가드는 TypeScript가 다른 문맥에서 변수의 타입을 이해할 수 있게 해주며, 타입별 연산을 안전하게 사용할 수 있게 합니다.
결론
이제 여러분은 TypeScript의 흥미로운 기능을 탐험해보았습니다. 코드를 배우는 것은 새로운 언어를 배우는 것과 같습니다. 연습과 인내가 필요합니다. 실험하고 실수를 하지 마라; 그것이 우리가 가장 잘 배우는 방법입니다!
계속 코딩하고 배우고, 언제 그幺 TypeScript로 놀라운 것들을 만들 수 있을 것입니다. 모두에게 행복한 코딩을 기원합니다!
Credits: Image by storyset