[TypeScript] 잉여 속성 체크란 무엇일까?

이 글은 이펙티브 타입스크립트 '아이템 11 잉여 속성 체크의 한계 인지하기'를 정리한 글입니다.

 

 

• 타입이 명시된 변수에 객체 리터럴을 할당할 때 TS는 해당 타입의 속성이 있는지, 그리고 ‘그 외의 속성은 없는지’ 확인한다.

Room의 구조적 타이핑

interface Room {
  numDoors: number;
  ceilingHeightFt: number;
}

const r: Room = {
  numDoors: 1,
  ceilingHeightFt: 10,
  elephant: "present", //오류메세지 : 개체리터럴은 알려진 속성만 지정할 수 있으며 'Room' 형식에 elephant 가 없습니다.
}

• 구조적 타이핑관점으로 생각해보면 오류가 발생하지 않아야 한다.
• 구조적 타입 시스템에서 발생할 수 있는 오류를 잡을 수 있도록 ‘잉여속성 체크’ 라는 과정이 수행되었다.
  • 변수에 타입을 명시적으로 선언했을 때 우리가 기대하는 할당 가능 검사와는 별도의 과정이라는 것을 알아야 한다.

const obj = {
  numDoors: 1,
  ceilingHeightFt: 10,
  elephant: "present",
};
const r: Room = obj; // 정상

• 임시변수 obj 객체는 Room 타입 할당이 가능하다.
• obj 타입은 Room 타입의 부분집합 (numbDoors, ceilingHeightFt) 을 포함하므로, Room 에 할당 가능하며 타입체커를 통과할 수 있다.

잉여 속성 체크

• 객체 리터럴을 변수에 할당하거나 함수에 매개변수로 전달할 때 잉여속성체크가 수행된다.
• 객체 리터럴에 포함되지 않은 속성이 객체에 할당되려고 할때, 타입스크립트는 이를 ‘잉여속성’ 이라고 판단하고 컴파일 오류를 발생시킨다.

의도와 다른 코드 체크

• 타입스크립트는 단순히 런타임에 예외를 던지는 코드에 오류를 표시할 뿐만 아니라, 의도와 다르게 작성된 코드도 찾는다.
  • darkmode → 오류로 체크해 darkMode로 바꿀 것을 제안한다.
• 아래의 예시에서 Options는 타입의 범위가 매우 넓다.
  • document / HTMLAnchorElement의 인스턴스 모두 string 타입이다.
  • 그러나, title / darkMode 객체는 체크가 된다.
    • 따라, darkMode로 바꿀 것을 제안하게 되는 것

interface Options {
  title: string;
  darkMode?:boolean
}
const o1: Options = document; //객체 리터럴이 아니기 때문에 잉여속성체크 하지 않음
const o2: Options = new HTMlAnchorElement; // 객체 리터럴이 아니기 때문에 잉여속성체크 하지 않음

• 잉여 속성 체크는 구조적 타이핑 시스템에서 허용되는 속성 이름의 오타 같은 실수를 잡는데 효과적인 방법이다.
• 선택적 필드를 포함하는 Options 같은 타입에 특히 유용하지만, 적용 범위가 제한적이고 오직 객체 리터럴에만 적용된다.
  • 잉여속성체크와 일반타입체크를 구분해서 적절하게 도움을 받자 (아이템 18, 26에서 다룸)

요약

• 객체 리터럴을 변수에 할당하거나 함수에 매개변수로 전달할 때 잉여 속성 체크가 수행된다.
• 잉여 속성 체크는 오류를 찾는 효과적인 방법이지만 타입스크립트 타입 체커가 수행하는 구조적 할당 가능성 체크와 역할이 다르다.
• 잉여 속성 체크에는 임시변수를 도입하면 잉여 속성 체크를 건너뛸 수 있다는 한계가 있다.