🚧 Literal type과 as const

📌 Literal Type

타입 지정시 string, number 같은 원시타입만 할당할 수 있는 것이 아니다.

개발자가 지정한 글자나 숫자 들을 타입으로 지정할 수 있다.

let john: "Texas";
let kim: 33;

• 이제 john에는 ‘Texas’라는 글자만 할당될 수 있고 kim에는 33이라는 숫자만 할당될 수 있다.

🔨 타입스크립트 const

const name = "kim" | "loco";

타입스크립트는 변할 수 있는 중요한 정보를 위와 같이 표현할 수 있다. 물론 자바스크립트에서는 불가능하다.

❗️ Literal Type 주의사항

const user = {
  name: "kim",
};

function foo(a: "kim") {
  /*...*/
}

foo(user.name); // Error

• 위 예시에서 오류가 발생하는 이유는 user 객체의 name 프로퍼티의 타입은 string인데 foo함수 매개변수 a의 타입은 Literal Type인 ‘kim’이기 때문에 오류가 난다.

이러한 문제를 해결하기 위해선 object 만들 때 타입을 미리 제한하여만들거나 as const를 object 자료형에 붙혀서 사용한다.

🦖 as const

type Lang = "JavaScript" | "TypeScript" | "Python";
function setLang(lang: Lang) {
  /* ... */
}

setLang("JavaScript"); // 정상

let language = "JavaScript";
setLang(language); // Error

• 변수에 할당하는 순간 language 식별자가 타입 추론을 string으로 하였다.

이러한 문제를 해결하는 방법은

1. 타입 선언시 language의 가능한 값 제한

let lang: Lang = "JavaScript";
setLang(lang); // 정상

2. const 키워드를 사용하여 상수로 표현

const lang = "JavaScript";
setLang(lang); // 정상

• const 키워드를 사용하여 타입 체커에게 lang은 변경할 수 없다고 알려준다.
• 타입스크립트는 lang에 대해 더 정확한 타입인 ‘JavaScript’로 추론할 수 있다.

function panTo(where: [number, number]) {
  /* ... */
}
const loc = [10, 20]; // type is number[]

panTo(loc); // Error

• 튜플 사용 시 주의사항은 const로 선언하여도 타입스크립트가 길이를 알 수 없는 숫자의 배열로 추론한다.
• const loc: [number, number] = [10, 20] 로 의도를 정확히 파악할 수 있도록 타입 선언을 제공한다.

const 와 as const 차이

• const 는 단지 값이 가리키는 참조가 변하지 않는 얕은 상수이다.
• as const(상수 문맥 제공)은 그 값이 내부까지 깊은 상수라는 사실을 타입스크립트에게 알려준다.
  • const loc = [10, 20] as const 타입이 readonly [number ,number]

    function panTo(where: readonly [number, number]) {/* ... */};
    const loc = [10,20] as const;
    panTo(loc); // 정상

  • 한가지 단점으로는 만약 튜플에 세번째 요소 추가시 오류가 타입 정의가 아닌 호출되는 곳에서 발생한다.