Effective Typescript - 아이템 26

Item 26 - 타입 추론에 문맥이 어떻게 사용되는지 이해하기

type Language = "JavaScript" | "TypeScript" | "Python";
function setLanguage(language: Language) {
  return language;
}

setLanguage("JavaScript"); // OK
let language = "JavaScript";
setLanguage(language);
// 'string' 형식의 인수는 
// 'Language' 형식의 매개변수에 할당될 수 없습니다.

타입을 변수로 분리하면 타입스크립트는 할당 시점에 타입을 추론합니다. 그러므로 let language = "JavaScript" 는 string 형식으로 추론이 되어서 오류가 발생하게됩니다. 

이를 해결하는 방법 두 가지 있습니다.

 

1.가능한 값 제한하기

type Language = 'JavaScript' | 'TypeScript' | 'Python'
function setLanguage(language: Language) {
  /* ... */
}
let language: Language = 'JavaScript'
setLanguage(language) // OK

2. 상수 사용하기

type Language = 'JavaScript' | 'TypeScript' | 'Python'
function setLanguage(language: Language) {
  /* ... */
}
const language = 'JavaScript'
setLanguage(language) // OK

 

문자열 리터럴 타입과 마찬가지로 튜플에서도 문제가 발생할 수 있습니다.

function panTo(where: [number, number]) {
  /* ... */
}

panTo([10, 20]) // OK

const loc = [10, 20]
panTo(loc)
//    ~~~ 'number[]' 형식의 인수는
//        '[number, number]' 형식의 매개변수에 할당될 수 없습니다.

이 에러를 고치는 방법은 다음과 같습니다.

 

1.타입 선언

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

2.상수 문맥 제공

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