[Typescript] 타입 별칭 Type Alias

Bam·2023년 8월 10일
0

Typescript

목록 보기
13/32
post-thumbnail

타입 별칭 Type Alias

타입 별칭(Type Alias)은 타입스크립트에서 타입을 정의할 때 변수처럼 선언이 가능하도록 해주는 기능입니다.

타입 별칭은 다음과 같은 형태로 선언합니다.

type 타입명 = 타입;

예를들어 다음과 같이 학생(Student)라는 타입을 선언할 수 있습니다.

type Student = {
  name: string;
  id: number;
  grade: number;
  birth: string;
  address: string;
};

위에서 선언한 타입을 다음과 같이 타입 선언에 이용하게 됩니다.

const student: Student = {
  name: 'Freddie',
  id: 230101,
  grade: 1,
  birth: '2000.01.01',
  address: '서울특별시',
};

이때 당연히 위에서 선언한 타입에 맞지않는 값을 주게 되면 타입 오류가 발생하게 됩니다.

동일한 스코프 범위 내에서 중복된 이름의 타입 별칭 선언은 불가능합니다.

type alias = number;
type alias = string; //불가능!!!
type alias = number;

const func = () => {
  type alias = string; //스코프 범위가 다르므로 이건 가능!!!
  //func 내부에서는 스코프로 인해 alias의 타입이 string으로 동작.
};
//func 스코프를 벗어나면 alias의 타입은 number로 동작.

인덱스 시그니처

인덱스 시그니처는 타입을 정의에서 수많은 객체 타입을 일일히 지정할 수 없는 경우에 사용할 수 있는 문법입니다.

예를들면 다음과 같이 색상 코드를 무수히 많이 저장하는 객체가 있다고 합니다.

type HexColorCodes = {
  black: string;
  red: string;
  orange: string;
  (... 엄청 많은 색상들)
  white: string;
};

const hexColorCodes: HexColorCodes = {
  black: '#000000',
  red: '#ff0000',
  orange: '#ffa500',
  (... 엄청 많은 색상들)
  white: '#ffffff',
};

이런 경우에 객체에도 색상을 추가할 때 마다 일일히 타입 별칭 정의에도 색상을 추가해주어야하는 큰 불편함이 발생하게 됩니다. 그래서 이러한 경우에 인덱스 시그니처를 사용해서 간단하게 타입을 정의할 수 있게 됩니다.

인덱스 시그니처를 사용해서 위 코드를 아래와 같이 축약할 수 있습니다.

type HexColorCodes = {
  [key: string]: string;
};

const hexColorCodes: HexColorCodes = {
  black: '#000000',
  red: '#ff0000',
  orange: '#ffa500',
  (... 엄청 많은 색상들)
  white: '#ffffff',
};

[key: 키 타입]: 값 타입형태의 선언을 통해 해당 별칭의 타입에 key 타입이 string이고, 값이 string인 프로퍼티들을 갖는다라고 정의할 수 있습니다. 일일히 모든 키값의 타입을 명시하지 않아도 되기 때문에 상당히 편해졌습니다.

이때, 당연하게도 타입이 맞지 않으면 타입 오류를 반환하게 됩니다.

또한, 인덱스 시그니처에 필수 프로퍼티를 포함해야한다면 다음과 같이 명시할 수 있습니다.

type HexColorCodes = {
  [key: string]: string;
  black: string;
  white: string;
};

필수 프로퍼티를 명시할때 주의할 점은 인덱스 시그니처로 선언한 값 타입과 필수 프로퍼티의 값 타입이 일치하지 않으면 오류가 발생하게 됩니다.

type HexColorCodes = {
  [key: string]: string;
  black: string;
  white: number; // 오류!!!
};

이러한 오류가 발생하는 원인은 타입 호환때문입니다.

타입 호환은 A와 B 두 가지 타입이 있을 때, 한 타입을 다른 타입으로 판단해도 되는가를 의미합니다. 예를들면 정사각형은 직사각형이 될 수 있지만, 직사각형은 정사각형이 될 수 없다라는 개념이라고 보시면 됩니다. (추후에 호환에 대해서 좀 더 자세하게 다뤄볼까하므로 현재는 이정도 개념이다라고만 익히시면 될 것 같습니다.)

1개의 댓글

comment-user-thumbnail
2023년 8월 10일

좋은 글 감사합니다.

답글 달기