Post

타입스크립트 - 타입스크립트 - 타입별칭/인터페이스

타입별칭, 인터페이스는 타입의 이름을 지정하는 방법

매우 유사하며, 자유롭게 선택 가능

차이점 1 - 확장

  • interface: extends 키워드를 이용하여 확장
  • type: intersection Operator를 이용하여 확장
1
2
3
4
5
6
7
8
9
10
11
12
13
// interface

interface Animal {
  name: string;
}
interface Bear extends Animal {
  honey: boolean;
}

const bear1: Bear = {
  name: "honey bear",
  honey: true
};
1
2
3
4
5
6
7
8
9
10
11
12
13
// type 별칭

type Animal = {
  name: string;
};
type Bear = Animal & {
  honey: boolean;
};

const bear: Bear = {
  name: "honey bear",
  honey: true
};

차이점 2 - 선언 병합 여부

  • interface: 선언병합 가능
  • type: 선언병합 불가능
1
2
3
4
5
6
7
8
9
10
11
12
// interface

interface Animal {
  name: string;
}
interface Animal {
  honey: boolean;
}
const Bear: Animal = {
  name: "honey bear",
  honey: true
};
1
2
3
4
5
6
7
8
9
// type 별칭
// ERROR!!! 식별자 중복 오류

type Animal = {
  name: string;
};
type Animal = {
  honey: boolean;
};

공통점 1 - union 유형을 사용하여 새로운 타입 생성

union 유형 사용하면 개발자가 타입 A 또는 타입 B가 될 수 있는 새 타입을만들수 있음
새로운 타입을 생성하려면 항상 type이어야 함

1
2
3
4
5
6
7
8
9
10
11
12
13
// interface + type

interface Animal {
  name: string;
}
interface Bear {
  honey: boolean;
}
type NewType = Animal | Bear;
const bear: NewType = {
  name: "honey bear",
  honey: true
};
1
2
3
4
5
6
7
8
9
10
11
12
13
// type

type Animal = {
  name: string;
};
type Bear = {
  honey: boolean;
};
type NewType = Animal | Bear;
const bear: NewType = {
  name: "honey bear",
  honey: true
};

(선언은 항상 타입이어야 함)

This post is licensed under CC BY 4.0 by the author.