7장 타입스크립트 타입별칭(Type alias)

📚 타입 별칭(Type alias)

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

type 키워드를 사용하여 타입을 부를 이름을 설정하는 것.

 

타입 별칭의 장점

• 타입이 어떤 역할을 하는지 의미있는 이름을 부여할 수 있음
• 반복되는 타입을 변수화해서 코드의 반복을 줄 일 수 있음

type MyMessage = string | number

function logText(text: MyMessage) {}

var message: MyMessage = '안녕하세요'
logText(message)

message의 타입 string | number 를  MyMessage 라는 타입이름으로 정의해서 사용할 수 있다.

 

 

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

타입 별칭과 인터페이스 둘다 객체 타입을 정의할 수 있다. 그렇다면 둘의 차이점은 무엇일까?

 

 1. 코드 에디터 표기 방식 차이

타입 별칭은 미리보기 화면이 표시되지만, interface는 표시되지 않는다.

type으로 정의했을 때는 미리보기를 사용할 수 있음

2. 사용할 수 있는 타입의 차이

• 인터페이스: 주로 객체 타입을 처리하는데 사용
• 타입 별칭: 일반 타입, 유니언 타입, 인터섹션 타입 등

type ID = string;
type Product = TShirt | Shoes;
type Teacher = Person & Adult;

이런 타입들은 인터페이스에선 정의할 수 없음.

interface Person {
  name: string;
  age: number
}
type Adult = {
  old: boolean;
}

type Teacher = Person & Adult

타입을 정의할 때 인터셉션 타입을 통해 interface 정의도 함께 사용할 수 있다.

 

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

타입확장이란 이미 정의되어 있는 타입들을 조합하여 더 큰 의미의 타입을 생성하는 것

• 인터페이스의 타입 확장: extends 키워드로 인터페이스 상속

interface Person {
  name: string;
  age: number;
}
interface Developer extends Person {
  skill: string;
}
var nanassi: Developer = {
  name: '나나씨',
  age: 100,
  skill: '웹개발'
}

• 타입별칭의 타입 확장: & 인터셉션 타입으로 타입 합치기

type Person = {
  name: string;
  age: number;
}
type Developer = {
  skill: string;
}
var nanassi: Person & Developer = {
  name: '나나씨',
  age: 100,
  skill: '웹개발'
}

or

type Nanassi = Person & Developer

var nanassi: Nanassi = {
    name: '나나씨',
    age: 100,
    skill: '웹개발'
}

인터셉션 타입을 별도의 타입 별칭으로 정의해서 사용.

 

인터페이스 선언 병합

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

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

interface Person {
  address: string
}

var nanssi: Person = {
  name: '나나씨',
  age: 100,
  address: '뉴욕'
}

Person을 인터페이스로 여러번 선언하면 하나의 내용으로 합쳐져서 사용된다.

 

📌 타입 별칭 /  인터페이스 사용 상황

인터페이스와 타입별칭의 차이점을 알아보았다.

그렇다면 타입 별칭을 언제 사용하는 것이 좋을까?

'타입 별칭으로만 타입 정의가 가능한 곳에선 타입 별칭을 사용하고, 백엔드와의 인터페이스를 정의할 땐 인터페이스를 이용하자'

책에선 이렇게 얘기한다. 각 경우의 예시를 보자.

 

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

• 주요 데이터 타입
• 인터섹션 타입
• 유니언 타입
• 제네릭(인터페이스도 사용 가능)
• 유틸리티 타입
• 맵드 타입

인터페이스는 주로 객체 타입을 정의할 때 사용된다.

이렇게 인터페이스로 정의 할 수 없는 곳에는 타입 별칭을 사용한다.

 

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

백엔드에서 프론트엔드로 어떻게 데이터를 넘길지 정의하는 작업을 인터페이스를 정의라고 한다.

여기서의 인터페이스는  타입스크립의 인터페이스가 아니라 영역 간 접점을 서로 맞추는 작업을 의미한다.

 

이 데이터를 받아오는 API 함수를 프론트엔드에서 제작하는데, 이때 받아올 데이터의 타입을 타입스크립트의 인터페이스로 정의할 수 있다.

 

🤔 타입별칭으로도 타입 정의할 수 있지 않나..?

가능하다. 하지만 확장성면에선 타입별칭보다 인터페이스를 통해 타입정의를 하는 것이 더 월등하다는 것을 느꼈다.

아래 예시코드를 보면 더욱 이해가 빠를 것.

 

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

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

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

데이터를 받아오는 함수의 반환값의 타입 정의해주고 싶을 때 인터페이스, 타입별칭을 사용할 수 있다.

하지만 서비스 요구 사항이 변경되어 사용자 객체 속성에 id, name 등이 추가되어야하는 상황이면 인터페이스의 상속을 통해 쉽게 타입을 확장 시킬 수 있다. 또는 동일한 인터페이스 이름을 선언하여 하나의 인터페이스 내용으로 합치는 것이 가능하다.

 

이렇게 유연하게 타입을 확장하는 관점에선 타입별칭보다 인터페이스가 더 유리하다.