Search
🧩

TIL: Type Aliases(type)과 Interfaces(interface)의 차이

Date
2021/08/07
Tags
TIL
TypeScript
Created by
매번 혼용했던 것 같은데, 그래서 둘의 정확한 차이가 뭐야? type이 좋은 거야, interface가 좋은 거야?

Type Aliases와 Interfaces의 차이

Type aliases(type)와 Interfaces(interface)는 굉장히 비슷하고, 많은 경우에 자유롭게 선택해서 사용할 수 있다. interface의 거의 모든 기능을 type에서도 사용할 수 있지만, 가장 구별되는 점은 type은 새 프로퍼티를 추가하기 위해 재선언할 수 없지만 interface는 언제나 확장 가능하다는 것이다.
이를 Interfaces는 Declaration merging이 가능하지만, Types는 Declaration merging이 불가능하다고 한다.

Interfaces

interface Animal { name: string } interface Bear extends Animal { honey: boolean } const bear = getBear() bear.name bear.honey
TypeScript
interface를 extending하는 모습

Types

type Animal = { name: string } type Bear = Animal & { honey: boolean } const bear = getBear(); bear.name; bear.honey;
TypeScript
type을 extending하는 모습 (intersections를 통해서 Bear type을 확장했다)
interface Window { title: string } interface Window { ts: TypeScriptAPI } const src = 'const a = "Hello World"'; window.ts.transpileModule(src, {});
TypeScript
interface는 재선언함으로써 기존에 존재하는 interface에 새 프로퍼티를 추가할 수 있다.
type Window = { title: string } type Window = { ts: TypeScriptAPI } // Error: Duplicate identifier 'Window'.
TypeScript
type은 한번 생성하면 바뀔 수 없다.
또한, interface의 경우에는 Object type을 정의할 때만 사용할 수 있고, Prmitive type을 rename(alias)하는 용도로 사용할 수 없다. 따라서 왼쪽 코드에서는 에러가 발생하지 않지만, 오른쪽 코드에서는 에러가 발생한다.
// Using type we can create custom names // for existing primitives: type SanitizedString = string type EvenNumber = number
TypeScript
에러가 발생하지 않는 코드
// This isn't feasible with interfaces interface X extends string { }
TypeScript
에러가 발생하는 코드
대부분의 경우 둘 중 무엇을 사용할지 개인적 선호에 따라 선택할 수 있고, 다른 종류의 정의가 필요할 경우 TypeScript가 알려줄 것이다. 휴리스틱한 방식을 원한다면, type의 기능이 필요해지기 전까지는 interface를 사용하라.

References