[TypeScript] Type Alias vs Interface

 

Type Alias

똑같은 타입을 한 번 이상 재사용하거나 또 다른 이름으로 부르고 싶은 경우 사용하며, Type에 대한 Alias(이름, 별칭)을 제공한다. Type Alias의 구문은 아래와 같다.

type Point = {
  x: number;
  y: number;
};
 
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });

Type Alias를 사용하면 객체 타입뿐만이 아니라 모든 타입에 대해서 새로운 이름을 부여할 수 있다. 예를 들어, 아래와 같이 유니언 타입에 대해 Type Alias를 부여할 수 있다.

type ID = number | string;

Type Alias는 단지 별칭에 지나지 않는 다는 점을 유의해야 한다. 즉, Type Alias을 사용해도 동일 타입에 대해 각자 구별가능한 '여러 버전'을 만드는 것이 아니다. 별칭을 이용하는 것은, 별도로 이름 붙인 타입을 새로 작성하는 것이다. 다시 말해, 아래 코드는 각각의 타입들이 동일 타입에 대한 별칭들이다.

declare function getInput(): string;
declare function sanitize(str: string): string;
// ---중간 생략---
type UserInputSanitizedString = string;
 
function sanitizeInput(str: string): UserInputSanitizedString {
  return sanitize(str);
}
 
// 보안 처리를 마친 입력을 생성
let userInput = sanitizeInput(getInput());
 
// 물론 새로운 문자열을 다시 대입할 수도 있습니다
userInput = "new input";

 

Interface

Interface 선언은 객체 타입을 만드는 또 다른 방법이다.

interface Point {
  x: number;
  y: number;
}
 
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });

Type Alias와 마찬가지로, 위 예시 코드는 마치 타입이 없는 임의의 익명 객체를 사용하는 것처럼 동작한다. TypeScript는 오직 printCoord에 전달된 값의 구조에만 관심을 가진다. 즉, 예측된 프로퍼티를 가졌는지 여부만을 따진다. 이처럼, 타입이 가지는 구조와 능력에만 관심을 가진다는 점에서 TypeScript는 구조적 타입 시스템이라고 불린다.

 

Type Alias와 Interface의 차이점

Type Alias는 매우 유사하며, 대부분의 경우 둘 중 하나를 저유롭게 선택해서 사용할 수 있다. interface가 가지는 대부분의 기능은 type에서도 동일하게 사용 가능하다. 이 둘의 가장 핵심적인 차이는, Interface는 선언 병합을 통해 새 프로퍼티를 추가하여 확장 가능하지만, Type Alias는 불가능하다.

• 선언 병합 : 컴파일러가 같은 이름으로 선언된 두 개의 개별적인 선언을 하나의 정의로 병합하는 것을 뜻한다.

 

Interface 확장하기

interface Animal {
  name: string
}

interface Bear extends Animal {
  honey: boolean
}

const bear = getBear() 
bear.name
bear.honey

 

교집합을 사용하여 Type Alias 확장하기

type Animal = {
  name: string
}

type Bear = Animal & { 
  honey: Boolean 
}

const bear = getBear();
bear.name;
bear.honey;

 

기존의 Interface에 새 필드 추가하기

interface Window {
  title: string
}

interface Window {
  ts: TypeScriptAPI
}

const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});

 

타입은 생성된 뒤에는 변경이 불가능하다.

type Window = {
  title: string
}

type Window = {
  ts: TypeScriptAPI
}

 // Error: Duplicate identifier 'Window'.

 

또한, 인터페이스는 오직 객체의 구조를 선언하는 데에만 사용되며, 기존의 원시 타입에 별칭을 부여하는 데는 사용할 수 없다.

 

대부분의 경우 개인적 선호에 따라 인터페이스와 타입 중에서 선택할 수 있으며, 필요하다면 TypeScript가 다른 선택을 제안할 것이다. 잘 모르겠다면, 우선 interface를 사용하고 이후 문제가 발생하였을 때 type을 사용하길 바란다.

 

---

Reference

Type vs Interface, 언제 어떻게?

 

Documentation - Everyday Types