TypeScript - Literal Type

Literal Type

변수에 원하는 값만 올 수 있게 할 때 literal type이 사용된다.

  let 이름: "kim";
  이름 = "kim";
  이름 = 'Park';  // Error

  let age: 10 | 20 | 30;
  age = 10;
  age = 0;  // Error

함수에서는 다음과 같이 사용할 수 있다.

  // 패러미터는 hello만, 리턴값은 1 또는 0
  function 함수(x: "hello"): 1 | 0 {
    return 1;
  }

  type 가위바위보 = "가위" | "바위" | "보";
  function 함수2(x: 가위바위보): 가위바위보[] {
    let arr = [x];
    return arr;
  }

리터럴 타입은 자료를 여러 개 저장할 수 있는 const 라고 생각 할 수 있다.

---

Literal Type 문제점과 해결 방법

문제점

  var 자료 = { name: "kim" };
  function 함수(a: "kim") {}
  내함수(자료.name); // 에러

위 코드에서 함수는 'kim' 타입만 인자로 받는다. 그런데 자료의 name 속성도 'kim'이 할당 되었는데도, 함수에 넣으면 에러가 발생한다. 그 이유는 name 값은 'kim'이지만 type은 string이기 때문이다.

해결법1

  var 자료: { name: "kim" } = { name: "kim" };
  function 함수(a: "kim") {}
  함수(자료.name);

자료에 name 속성에 대한 타입을 'kim'으로 명시한다. 이렇게 하면 자료.name의 타입은 string이 아니라 'kim'이 된다.

해결법2

  var 자료 = { name: "kim" } as const;
  function 함수(a: "kim") {}
  내함수(자료.name);

as const는 literal type으로 지정해준다. 즉, value를 type으로 변경한다.
그리고 as const를 쓰면 readonly로 설정해준다.