아이템 21 - 타입 넓히기

타입스크립트에서는 타입을 추론할 때, 지정된 단일 값을 가지고 할당 가능한 값들의 집합을 유추합니다. 이러한 과정을 넓히기(widening)라고 부릅니다.

넓히기 과정에서는 일반적으로 변수가 선언된 후로는 타입이 바뀌지 않는 것을 가정하고 명확성과 유연성 사이의 균형을 유지해서 타입을 추론하려고 합니다.

원시값의 넓히기 과정 예시

let x = 'x';

변수 x 에는 타입을 명시하지 않았으므로 타입스크립트는 타입 추론을 하게 되는데, 할당 가능한 값들의 집합에는 다음과 같은 후보군이 존재합니다.

• any
• string
• 'x'

일반적으로 타입을 추론할 때, 변수가 선언된 후로는 타입이 바뀌지 않는 것을 가정하기 때문에 위 후보군 중에서 any 타입은 다른 타입도 할당할 수 있어 후보군에서 제외됩니다. 또한 변수 x 는 let 으로 선언되었기 때문에, 'x'라는 string literal이 아닌 다른 string 으로 재할당될 수 있을 것이라 생각하여 타입스크립트는 최종적으로 변수 x의 타입을 string 으로 추론하게 됩니다.

const x = 'x';

위의 예시와 달리 변수 x 는 const 로 선언되었기 때문에, 다른 string 으로 재할당이 불가능하여 타입스크립트는 최종적으로 변수 x 의 타입을 string literal인 'x' 로 추론하게 됩니다.

객체의 넓히기 과정 예시

const v = { x: 1 };

변수 v 에 할당 가능한 값들의 집합에는 다음과 같은 후보군이 존재합니다.

• { readonly x: 1 }
• { x: number }
• { [key: string]: number }
• ...

객체의 경우 넓히기 알고리즘은 각 요소를 let 으로 할당된 것처럼 다룹니다. 따라서 변수 v 의 타입은 { x: number } 가 됩니다.

타입 추론 강도 제어하기

지금까지 타입스크립트에게 지정된 값만을 가지고 타입을 추론하게 했는데, 다음과 같은 방법으로 타입 추론의 강도를 제어할 수 있습니다.

• 명시적 타입 구문 제공

  const v: {x: 1|3|5} = {
    x: 1,
  };  // Type is { x: 1 | 3 | 5; }

• 추가적인 문맥을 제공 (아이템 26에서 다룸)

• const 단언문 사용

  // 값 뒤에 as const를 작성하면, 타입스크립트는 최대한 좁은 타입으로 추론합니다.
  const v1 = {
    x: 1,
    y: 2,
  };  // Type is { x: number; y: number; }
  
  const v2 = {
    x: 1 as const,
    y: 2,
  };  // Type is { x: 1; y: number; }
  
  const v3 = {
    x: 1,
    y: 2,
  } as const;  // Type is { readonly x: 1; readonly y: 2; }