아이템 11 - 잉여 속성 체크의 한계 인지하기

타입스크립트는 타입이 명시된 변수나 함수의 인자에 값을 할당할 때, 할당 가능 검사를 수행하게 된다. 즉, 공통된 속성이 있는지 검사한다.

interface Room {
  numDoors: number;
  ceilingHeightFt: number;
}
const obj = {
  numDoors: 1,
  ceilingHeightFt: 10,
  elephant: 'present',
};
const r: Room = obj;  // 할당 가능하다.

💡 할당 가능 검사란?

변수에 할당하고자 하는 값의 타입이 변수에 명시된 타입 속성과 공통된 속성이 있는지 확인하는 검사를 말한다. 집합적 관점으로 봤을 때, 변수에 할당하고자 하는 값의 타입은 변수에 명시된 타입의 부분 집합을 포함한다.

하지만 이렇게 할당 가능 검사만 수행한다면 타입이 명시된 변수나 함수의 인자에 할당할 수 있는 값의 타입 범위가 매우 넓기 때문에 필요없는 속성을 할당할 수도 있게 된다.

interface Room {
  numDoors: number;
  ceilingHeightFt: number;
}
const obj = {
  numDoors: 1,
  ceilingHeightFt: 10,
  elephant: 'present',
};
const r: Room = obj;  // Room 타입에 존재하지 않는 elephant 속성이 있더라도 할당 가능하다.

만약 타입이 명시된 변수나 함수의 인자에 값을 할당할 때, 객체 리터럴을 할당한다면 공통된 속성이 있는지 검사할 뿐만 아니라 그 외의 속성이 없는지도 검사하게 되는데 이것을 잉여 속성 체크라고 한다.

interface Room {
  numDoors: number;
  ceilingHeightFt: number;
}
const r: Room = {
  numDoors: 1,
  ceilingHeightFt: 10,
  elephant: 'present',
// ~~~~~~~~~~~~~~~~~~ Object literal may only specify known properties,
//                    and 'elephant' does not exist in type 'Room'
};

만약 잉여 속성 체크를 활용한다면 다음과 같은 장점을 얻을 수 있다.

• 런타임에 예외를 던지는 코드에 오류를 표시한다.
• 외도와 다르게 작성된 코드를 찾을 수 있다. (e.g. 오타)

interface Options {
  title: string;
  darkMode?: boolean;
}
function createWindow(options: Options) {
  if (options.darkMode) {
    setDarkMode();
  }
  // ...
}
createWindow({
  title: 'Spider Solitaire',
  darkmode: true // darkmode가 아닌 darkMode이어야 한다.
// ~~~~~~~~~~~~~ Object literal may only specify known properties, but
//               'darkmode' does not exist in type 'Options'.
//               Did you mean to write 'darkMode'?
});

이러한 장점을 가진 잉여 속성 체크는 다음과 같은 경우에는 적용되지 않는다.

• 타입 구문이 없는 임시 변수를 사용하는 경우

  interface Options {
    title: string;
    darkMode?: boolean;
  }
  const intermediate = { title: 'Ski Free', darkmode: true };
  const o: Options = intermediate;  // OK

• 타입 단언문을 사용하는 경우

  interface Options {
    title: string;
    darkMode?: boolean;
  }
  const o = { title: 'Ski Free', darkmode: true } as Options;  // OK