타입스크립트 - 타입 별칭

jihyo·2023년 7월 13일

typescript 타입스크립트

도서 : 쉽게 시작하는 타입스크립트

목록 보기

5/9

타입 별칭 Type Aliases

타입 별칭은 타입을 정의할 때 이름을 붙일 수 있는 건데 그 이름을 참조해서 같은 타입을 여러 번 재사용할 수 있게 된다.

사용법

type 키워드를 사용하여 정의한다.

type Person = {
  name: string;
  age: number;
}

let tom: Person = {
  name: 'tom',
  age: 21
};

타입 별칭과 인터페이스 차이점

위 코드에서 타입 별칭 사용법을 봤을 때 인터페이스와 차이점이 딱히 없어보이지만 상황에 따라 차이점을 확인할 수 있따.

코드 에디터에서 표기 방식의 차이

가장 쉽게 구분되는 점이다.

type Student = {
  name: string;
  grade: number;
}

interface Teacher {
  name: string;
  subject: string;
}

위 코드처럼 각각 type과 interface로 정의하고 타입을 확인해보면 아래와 같다.

1. type

2. interface

만약 변수에 연결된 타입의 구체적 정보를 파악하고 싶은 경우에는 type을 사용하면 좋을 것이다.

타입 확장 관점에서 차이

타입 확장 : 이미 정의된 타입들을 조합해 더 큰 의미의 타입을 생성하는 것

인터페이스의 타입 확장

인터페이스는 상속을 통해 확장을 한다.

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

interface Developer extends Person {
  skill: string;
}

let tom: Developer = {
  name: 'tom',
  age: 21,
  skill: 'React'
};

타입 별칭의 타입 확장

타입 별칭은 인터섹션 타입으로 객체 타입 2개를 합쳐서 확장한다.

type Person = {
  name: string;
  age: number;
}

type Developer = {
  skill: string;
}

let tom: Person & Developer = {
  name: 'tom',
  age: 21,
  skill: 'React'
};

선언 병합

인터페이스의 선언 병합이라는 특성이 있다. 인터페이스를 선언할 때 동일한 이름으로 선언하면 인터페이스 내용을 합치는 특성을 이용하는 것이다.

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

interface Person {
  address: string;
}

let tom: Person = {
  name: 'tom',
  age: 21,
  address: 'NY'
};

console.log(tom);

그래서 위 코드를 실행시켰을 때 아래와 같은 결과가 나온다.

3. 선언 병합

적절한 타입 별칭 사용

지금까지 봤을 때는 타입 별칭과 인터페이스를 구분해서 사용할 만한 이유를 찾지 못했다. 개인의 선호 또는 규칙에 따르겠지만 충분히 구분되서 사용하는 경우도 존재한다.

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

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

주요 데이터 타입
인터섹션/유니언 타입

인터페이스는 객체 타입을 정의할 때 사용하기 때문에 아래와 같은 경우에는 대체할 수 없다.

type Address = string;
type Phone = string | number;
type Admin = Person & Dveloper;

또한 제네릭(Generic), 유틸리티 타입(Utility Type), 맵드 타입(Mapped Type)과 같이 사용할 수 있다.

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

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

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

제네릭은 인터페이스와 타입 별칭에 모두 사용할 수 있다.
유틸리티/맵드 타입은 기존에 정의된 타입을 변경하거나 일부만 활용할 때 사용한다.

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

백엔드와의 인터페이스 정의에서 말하는 인터페이스는 데이터를 어떤 형식으로 주고 받을지 정하는 것을 의미한다.

데이터를 정의할 때 프론트에서는 API 함수를 설계한다.

// 1. 타입 별칭으로 API 함수의 응답 형태를 정의
type User = {
  id: number;
  name: string;
}

function fetchData(): User {
  return axios.get('~');
}

// 2. 인터페이스로 API 함수의 응답 형태를 정의
interface User {
  id: number;
  name: string;
}

function fetchData(): User {
  return axios.get('~');
}