매번 혼용했던 것 같은데, 그래서 둘의 정확한 차이가 뭐야? 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를 사용하라.