타입 별칭과 인터페이스

다음 레슨에 오신 것을 환영합니다! 이 레슨에서는 TypeScript의 타입 별칭과 인터페이스에 대해 배우고, 두 기능의 차이점과 공통점, 각각을 언제 사용해야 하는지 살펴봅니다. 시작해 보겠습니다!

타입 별칭이란 무엇인가요?

타입 별칭을 사용하면 타입에 사용자 지정 이름을 정의할 수 있습니다. 기본 타입, 객체 또는 함수 시그니처를 나타낼 수도 있습니다.

예시:

과제: 책을 나타내는 객체의 타입 별칭을 만들고 이를 사용하여 변수를 정의하세요.

type Point = {
  x: number;
  y: number;
};

let point: Point = { x: 10, y: 20 };
console.log(point); 
// Output: { x: 10, y: 20 }

인터페이스란 무엇인가요?

인터페이스는 속성과 메서드를 포함한 객체의 구조를 정의합니다. 객체의 일관성과 타입 안전성을 보장하기 위해 자주 사용합니다.

예시:

과제: 사용자 프로필을 위한 인터페이스를 만들고 이를 사용하여 변수를 정의하세요.

interface Point {
  x: number;
  y: number;
}

let point: Point = { x: 5, y: 15 };
console.log(point); 
// Output: { x: 5, y: 15 }

타입 별칭과 인터페이스: 공통점

타입 별칭과 인터페이스에는 다음과 같은 공통 기능이 있습니다.

• 둘 다 객체의 형태를 설명할 수 있습니다.
• 둘 다 함수 타입을 정의하는 데 사용할 수 있습니다.
• 둘 다 다른 타입의 확장을 지원합니다.

예시: 함수 타입:

과제: 함수에 대한 타입 별칭과 인터페이스를 각각 정의하고 사용하세요.

type Add = (a: number, b: number) => number;
interface Subtract {
  (a: number, b: number): number;
}

let add: Add = (x, y) => x + y;
let subtract: Subtract = (x, y) => x - y;

console.log(add(5, 3)); 
// Output: 8
console.log(subtract(5, 3)); 
// Output: 2

타입 별칭과 인터페이스: 차이점

주요 차이점은 다음과 같습니다.

• 인터페이스: merged(선언 병합)을 지원합니다.
• 타입 별칭: 병합할 수 없습니다.
• 타입 별칭: 유니언 타입과 교차 타입을 정의할 수 있습니다.
• 인터페이스: 주로 객체 형태를 정의하도록 설계되었습니다.

예시: 타입 별칭을 사용한 유니언 타입:

과제: 타입 별칭을 사용하여 유니언 타입을 정의하고 변수에 다양한 값을 할당하세요.

type StringOrNumber = string | number;

let value: StringOrNumber = "Hello";
value = 42;
// value = true; 
// Error: Type 'true' is not assignable to type 'StringOrNumber'.

타입과 인터페이스 확장하기

타입 별칭과 인터페이스는 모두 다른 타입을 확장할 수 있습니다.

• 인터페이스: extends 키워드를 사용합니다.
• 타입 별칭: 교차 타입(&)을 사용합니다.

예시:

과제: 타입 별칭과 인터페이스를 확장하여 새로운 타입을 만드세요.

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

type Bird = Animal & { canFly: boolean };

let myDog: Dog = { name: "Buddy", breed: "Golden Retriever" };
let myBird: Bird = { name: "Parrot", canFly: true };

console.log(myDog, myBird);

선언 병합

인터페이스는 선언 병합을 지원합니다. 선언 병합은 같은 이름을 가진 여러 인터페이스 선언을 하나로 합치는 기능입니다. 타입 별칭은 이 기능을 지원하지 않습니다.

예시:

과제: 같은 이름을 가진 두 개의 인터페이스 선언을 만들고 선언 병합을 테스트하세요.

interface Person {
  name: string;
}

interface Person {
  age: number;
}

let person: Person = { name: "Alice", age: 30 };
console.log(person); 
// Output: { name: "Alice", age: 30 }

각각 언제 사용하나요?

다음 지침을 참고하세요.

• 객체 형태를 정의하거나 선언 병합이 필요한 경우 인터페이스를 사용하세요.
• 유니언, 교차 타입 또는 함수 타입을 정의하는 경우 타입 별칭을 사용하세요.

팁: 명확성과 일관성을 위해 사용 목적에 가장 잘 맞는 것을 선택하세요!

잘하셨습니다!

축하합니다! TypeScript에서 타입 별칭과 인터페이스의 공통점과 차이점, 그리고 각각을 언제 사용해야 하는지 배우셨습니다. 다음 레슨에서는 조건부 타입과 같은 TypeScript의 고급 기능을 살펴보겠습니다. 계속 코딩해 보세요!