[TS] 문자열 리터럴(literal) 타입 지정하기

바로 직전 인터페이스에 대해 익히면서 설명 중 리터럴이란 것이 나왔다. 추가적으로 검색하면서 이건 인터페이스에만 해당하는 내용이 아니니 따로 빼서 정리하는게 좋을 것 같았다.

문제 상황

인터페이스를 공부할 때 아래와 같은 예시 상황이 있었다.

interface User {
  name: string;
  age: number;
  gender?: string;
  readonly birthYear: number;
  [grade: number]: string;
}

그런데 만약 원하는 grade들의 value값은 A, B, C, D, F인데 위처럼 작성하면 아래의 상황에서 오류 없이 넘어가게 된다.

let user:User = {
  name: 'Tom',
  age: 30,
  birthYear: 1999,
  1: '사랑',
  2: '평화',
  3: 'stress'
}
// 문제없이 실행됨

이는 원하는 사용법이 아니다. 그렇다면 어떻게 이를 제한할 수 있을까?

리터럴 타입 작성하기

type Score = 'A' | 'b' | 'C' | 'D' | 'F';

interface User {
  name: string;
  age: number;
  gender?: string;
  readonly birthYear: number;
  [grade: number]: Score;
}

위에서 type이라는 작성법을 이용해 Score라는 타입을 만들어주었다. 이렇게 직접 타입을 만들어 지정하는 것도 가능하다.

이렇게 만든 type은 위 예시뿐 아니라 다른 곳, 예를 들면 아래와 같이 함수에서도 사용가능하다.

type CardinalDirection =
    | "North"
    | "East"
    | "South"
    | "West";

function move(distance: number, direction: CardinalDirection) {
    // ...
}

move(1,"North"); // Run
move(1,"Nurth"); // Error

• 참고:
  • 코딩앙마님의 유튜브 강의
  • TypeScript Deep Dive - 리터럴(Literal)