타입 별칭이란?

• 특정 타입이나 인터페이스 등을 참조할 수 있는 타입 변수를 의미한다.

• 여러 번 반복되는 타입을 변수화해서 쉽게 표기하고 싶을 때 사용한다.

type Message = string | number;

function logText(text: Message) {
  console.log(text);
}

const logMessage: Message = 'hi';
logText(logMessage);

타입 별칭과 인터페이스

• 변수에 연결된 타입이 구체적으로 어떤 모양인지 파악할 때는 타입 별칭이 더 좋은 듯

• 선언된 타입 별칭에 마우스를 올리면 세세한 속성을 볼 수 있지만 인터페이스는 인터페이스의 이름만 나온다.

사용할 수 있는 타입의 차이

• 인터페이스는 주로 객체의 타입을 정의하는 데 사용한다.

• 타입 별칭은 일반 타입의 이름을 지을때, 유니언 타입, 인터섹션 타입등에 사용할 수 있다.

타입의 확장 관점에서의 차이

• 타입 확장이란 이미 정의되어 있는 타입들을 조합해서 더 큰 의미의 타입을 생성하는 것을 의미한다.

• 인터페이스는 extends키워드를 사용하여 2개의 객체 타입을 하나로 합칠 수 있다.

  	- +인터페이스는 선언 병합을 사용하여 인터페이스의 속성을 합칠 수 있다.

interface Person {
  name: string;
  age: number;
}

interface Person {
  address: string;
}

const me: Person {
  name: 'jonghyun',
  age: 99,
  address: '미금',
};

• 타입 별칭은 &(인터섹션)를 사용하여 타입을 하나로 합칠 수 있다.

타입 별칭은 언제 쓰면 좋을까

• 타입 별칭으로만 타입 정의가 가능한 곳에서는 타입 별칭을 사용하고 백엔드와의 인터페이스를 정의하는 곳에서는 인터페이스를 사용하는 것이 좋은 것 같다.

타입 별칭으로만 정의할 수 있는 타입

• 데이터 타입, 인터섹션, 유니언 타입은 타입 별칭으로만 정의할 수 있다.

• 제네릭, 유틸리티 타입, 맵드 타입과도 연동하여 사용할 수 있다.

  	- 제네릭은 인터페이스에서도 사용할 수 있지만 유틸리티, 맵드 타입은 타입 별칭으로만 정의할 수 있다.

// 제네릭
type DropDown<T> = {
  id: string;
  title: T;
}

// 유틸리티 타입
type Admin = { name: string; age: number; role: string; }
type OnlyName = Pick<Admin, 'name'>

// 맵드 타입
type Picker<T, K extends keyof T> = {
  [P in K]: T[P];
}

백엔드와의 인터페이스 정의

• User 타입 부분에 마우스를 올려두면 타입의 미리보기를 볼 수 있어 타입 별칭을 사용하는것도 나쁘지 않은 선택이다.

type User = {
  id: string;
  name: string;
}

function fetchUserInfo(): User {
  return axios.get('http://...')
}

• 하지만 타입을 손쉽게 확장하고 유연하게 사용하는데에는 인터페이스가 조금 더 유리하다.

interface Admin {
  role: string;
  department: string;
}

interface User extends Admin {
  id: string;
  name: string;
}

interface User {
  skill: string;
}

// 위의 인터페이스들은 아래의 인터페이스와 같은 동작을 한다.
interface User {
  role: string;
  department: string;
  id: string;
  name: string;
  skill: string;
}

출처: 쉽게 시작하는 타입스크립트