Skip to content

Qvil Blog

Github

[Typescript] Differences Between Type Aliases and Interfaces, Type과 Interface 차이점

— Typescript, Type, Interface — 1 min read

요약

  • Type과 Interface는 거의 모든 기능이 유사하다. 대분분의 경우 취향에 따라 선택 가능.
  • Type은 Declare merging 불가능. 그러나 Interface는 가능
  • Interface는 object 형식만 선언할 수 있고 Primitive type은 선언할 수 없다.
  • 에러메세지에서 Interface는 이름이 나오지만 Type은 이름이 안나온다.

같은 기능 - Type과 Interface 타입 확장

Extending an interface

1interface Animal {
2  name: string;
3}
4
5interface Bear extends Animal {
6  honey: boolean;
7}
8
9const bear = getBear();
10bear.name;
11bear.honey;

Extending a type via intersections

1interface Animal {
2  name: string;
3}
4
5interface Bear extends Animal {
6  honey: boolean;
7}
8
9const bear = getBear();
10bear.name;
11bear.honey;

Declare merging - 새로운 필드를 추가할 때 Interface는 가능하지만 Type은 안된다.

Adding new fields to an existing interface

1interface Bear {
2  name: string;
3}
4
5interface Bear {
6  honey: boolean;
7}
8
9const bear: Bear = {
10  name: "teddy",
11  honey: true,
12};
13
14console.log(bear);
15
16// [LOG]: {
17//   "name": "teddy",
18//   "honey": true
19// }

A type cannot be changed after being created

1type Bear = {
2  name: string;
3};
4
5type Bear = {
6  honey: boolean;
7};
8
9// Error: Duplicate identifier 'Bear'.

Declare the shapes of object, Not re-name primirives

1type SomeNumber = number;
2interface MyNumber {
3  number: number;
4}
5
6interface SomeType extends number {} // X

에러메세지

1interface Mammal {
2  name: string;
3}
4
5function echoMammal(m: Mammal) {
6  console.log(m.name);
7}
8
9echoMammal({ name: 12343 }); // Error: (property) Mammal.name: string
10
11type MammalType = { name: string };
12function echoAnimal(m: MammalType) {
13  console.log(m.name);
14}
15
16echoAnimal({ name: 12345 }); // Error: (property) name: string

참고