Typescript의 type-aliases를 알아보자.

Derek·2021년 3월 9일
0

typescript_study

목록 보기
5/6
post-thumbnail

안녕하세요, Derek 입니다. :)

오늘 주제는 typescript 에서 interface 와 매우 흡사한, type-aliases 를 다뤄보려고 합니다.

갑시다.


1. Type-Aliases 란?

타입스크립트 공식 문서에는 Type-aliases 의 정의를 다음과 같이 하고 있습니다.

Type aliases create a new name for a type. Type aliases are sometimes similar to interfaces, but can name primitives, unions, tuples, and any other types that you’d otherwise have to write by hand.

즉, 주어진 자료형에 대한 별명을 만들어주는 역할을 한다.

구체적인 예시를 들어보겠습니다.

type PersonInfo = {
    name: string,
    age: number;
}

let seho1: PersonInfo = {
    name: "세호",
    age: 30
}

위와 같이 nameage 라는 객체들을 가진 PersonInfo 라는 별명으로 붙이는 작업입니다.

또한 아래와 같이 기본형에도 별명을 붙일 수가 있습니다.

type Name = string;
type Age = number;
type CombineNumberString = string | number;
type User = {
    name: string;
    heihgt: number;
}

2. interface 와의 관계

너무 비슷하다. interfacetype-aliases 는.

그렇다면 어떤 점이 다르고, 어떤 상황에서 각각을 써야 현명할지 고민해보자.

2.1 interfaceType-aliases 의 차이점

거두절미하고 바로 차이점을 나열하려고 한다.

  1. 새로운 타입을 만드는가?

    • interface새로운 타입 이름을 만든다. 즉, 에러 메세지에서 생성한 interface 가 리터럴로 찍혀나온다.
    • type-aliases 는 그렇지 못하다. 생성한 별명으로 찍혀나오지 않는다.
  2. extends 가 되는가?

    • interface 는 상속의 개념이 통한다. 이 곳에서 그 내용을 확인 할수 있다.
    • type-aliases 는 확장이 불가능하다.
    • TS 2.7 부터는 타입도 인터섹션을 통해 다른 타입을 상속할 수 있다고 한다.
  3. merge declaration 이 가능한가?

    • interface 는 가능하지만,
    • type-aliases 는 불가능하다.

merge delcaration 이란,

interface Box {
  height: number;
  width: number;
}

interface Box {
  scale: number;
}

let box: Box = { height: 5, width: 6, scale: 10 }

위와 같은 코드가 가능함을 뜻한다. 같은 이름으로 여러번 선언을 할 수 있고, 그 내용이 Union 개념처럼 작동한다.

간단하다.

2.2 언제 무엇을 써야할까.

똑 부러지게 상황별로 나뉘어져 있는 것 같진 않다. 다만, 대부분의 경우 2가지를 추천한다.

  1. 어지간하면, interface 를 사용해라.

  2. 외부에 공개할 APIInterface 사용해라.

    • merge declaration 을 위해.

약간은 헷갈리는 개념인 interfacetype-aliases 를 정리해보았다.

틈틈히 변경되거나 / 수정사항이 생길 것도 하다. 그때마다 수정해야지.

틀린내용이나 수정사항이 발견되면 언제든지 댓글로 알려주세요.

감사합니다. 🙏

profile
Whereof one cannot speak, thereof one must be silent.

0개의 댓글