[TypeScript] Type Alias와 Interface 비교

Type Alias (타입 별칭)과 인터페이스를 비교해보자.

 

1. 어떻게 유사한가?

다음은 x좌표와 y좌표를 갖는 포지션을 두 가지 방식으로 정의한 것이다.

type PositionType = {
  x: number;
  y: number;
}

interface PositionInterface {
  x: number;
  y: number;
}

이렇게 정의하면

객체는 타입 또는 인터페이스를 따를 수 있고...

const obj1: PositionType = {
  x: 1,
  y: 1,
};
const obj2: PositionInterface = {
  x: 1,
  y: 1,
};

클래스 역시 타입 또는 인터페이스를 구현할 수 있으며...

class Pos1 implements PositionType {
  x: number;
  y: number;
}
class Pos2 implements PositionInterface {
  x: number;
  y: number;
}

타입과 인터페이스 모두 확장이 가능하다.

interface ZPositionInterface extends PositionInterface {
  z: number;
}

type ZPositionType = PositionType & { z: number };

---

2. 기능적 차이점

인터페이스는 재선언 함으로써 병합 가능하다. (타입은 재선언 불가)

아래 인터페이스를 구현하려면 x, y, z를 모두 정의해야 한다.

interface PositionInterface {
  x: number;
  y: number;
}

interface PositionInterface {
  z: number;
}

 

타입은 Utility Types라는 기능을 통해 변환이 가능하다.

아래는 여러 Utility Types 중 Index Type을 통해 변환한 예시이다.

type Person = {
  name: string;
  age: number;
  gender: 'male' | 'female';
};

type Gender = Animal['gender']; 	// 'male' | 'female'
type Keys = keyof Person;		// 'name' | 'age' | 'gender'

---

3. 보다 근본적인 차이점

타입과 인터페이스는 유사하지만, 그 개념과 사용처가 다르다.

• 인터페이스는 규격을 정의할 때 사용한다. 하나의 인터페이스를 구현하는 여러 클래스는 동일한 규격사항을 따르게 된다.
• 타입은 데이터를 담을 목적이 있을 때 사용한다. 위의 Position 예제는 타입을 사용하는 것이 맞다. 인터페이스를 사용하면 어디선가 이를 구현하는 클래스가 있다고 생각하기 마련이다.