TypeScript 시작하기 (7) - Literal Types로 만드는 const 변수 유사품

지난 시간에는 타입을 변수로 지정하는 법과 readonly 에 대해 알아보았습니다. 오늘은 Literal Types 에 대해 알아보겠습니다.

1. 타입을 지정하는 것에서 더 엄격한 타입 지정이 가능합니다. Literal types 는 변수에 무엇이 들어올지 더 엄격한 관리를 가능하게 해줍니다.

   let nickname: 123;
   nickname = "123"; // 오류 발생

2. 함수도 Literal types 가 가능합니다. parameter or return 값에 들어올 수 있는 것만 더욱 엄격하게 지정할 수 있습니다.

   const practice = (a: "hello") => {};
   practice(123); // 에러 발생

3. 가위 or 바위 or 보 중 1개만 입력 가능하고, 가위 or 바위 or 보 만 들어올 수 있는 array 를 return 하는 함수를 만들어봅시다.

   const game = (x: "가위" | "바위" | "보"): ("가위" | "바위" | "보")[] => {
     return ["가위"];
   };
   
   game("가위");

4. Literal types 는 const 변수와 유사하게 사용이 가능하지만, 문제점이 있습니다. 아래의 코드에서는 에러가 발생하는데 Literal types 를 사용한 함수를 사용할 때, 파라미터로 "kim" 이라는 타입만 들어올 수 있지 "kim" 이라는 자료가 들어올 수 있는 것이 아니기 때문입니다. ("kim" 자료의 타입은 string 입니다.)

   var data = {
     name: "kim",
   };
   
   const practice = (x: "kim") => {};
   
   practice(data.name); // 에러 발생

5. 해결책으로는 as const 라는 키워드를 사용할 수 있습니다. as const 의 효과는 object value 값을 그대로 타입으로 지정해주며, object key 들에 대해 모두 readonly 를 붙여줍니다.

   var data = {
     name: "kim",
   } as const;
   
   const practice = (x: "kim") => {};
   
   practice(data.name); // 에러 발생 x

지금까지 Literal Types 에 대해 알아보았습니다. 다음 시간에는 함수와 methods 에 type alias 를 지정하는 방법을 알아보겠습니다.