타입스크립트의 초과속성체크(excess property checks)를 알고 계셨나요?

타입스크립트의 초과속성체크 알고 계셨나요?

 

interface SquareConfig {
  color?: string;
  width?: number;
}
 
function createSquare(config: SquareConfig): { color: string; area: number } {
  return {
    color: config.color || "red",
    area: config.width ? config.width * config.width : 20,
  };
}
 
let mySquare = createSquare({ colour: "red", width: 100 });

 

위와 같은 코드가 있습니다

 

createSquare에 인자로 전달되는 SquareConfig 타입에는 color와 width 속성이 optional하게 존재합니다

 

그런데 이 코드에서는 color 대신에 오타로 colour가 전달된것을 볼 수 있습니다

 

color 속성은 optional이라 color 속성이 전달되지 않았어도 되지 않나 싶은데요

 

과연 이 코드는 타입스크립트 문법을 위배했을까요?

 

 

 

 

createSquare의 인자에서 color 대신에 colour로 타이핑되었습니다

 

width의 속성은 호환되고, color 속성이 존재하지 않고, 의미없는 colour 프로퍼티가 있기에

 

타입이 맞다라고 얘기할수 있지만, 타입스크립트는 이 코드에 버그가 있는것으로 간주합니다

 

 

 

타입스크립트에서 object literal은 특별한 취급을 받고 이를 다른 변수에 할당하려고 할때 초과속성체크를 거치게됩니다

 

만약 object literal에서 해당 타입이 가지고 있지 않은 프러퍼티를 가지고 있을때 에러를 발생시킵니다

 

 

 

만약 colour로 전달한것이 의도였다면 이 코드에서 에러를 발생시키지 않도록 할 수 없을까요?

 

이 에러를 피하기 위한방법으로는 단언을 사용하는것이니다

 

let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig);

 

 

오류가 발생하지 않습니다

 

그런데 colour 프로퍼티가 의도적이었다면

 

interface SquareConfig {
  color?: string;
  width?: number;
  [propName: string]: unknown;
}

 

SquareConfig 타입을 이렇게 고치는, 차라리 이 방법이 더 나을수 있습니다

 

충분히 다른 개발자에게도 의도 자체는 전달이 될 수 있기 때문입니다

 

 

그런데 이 방법을 사용하면 너무 많은 종류의 프로퍼티가 가능하다는 점도 좋지 않습니다

 

 

아니면 에러를 피하는 다른 방법이 더 있을까요?

let squareOptions = { colour: "red", width: 100 };
let mySquare = createSquare(squareOptions);

 

에러를 억누르기 위해서 다른 변수에 이 object를 할당하고 다시 전달한다면 초과속성체크를 하지 않기 때문에

 

에러가 발생하지 않습니다

 

 

이 방법으로 동작하긴하겠지만 squareOptions와 SquareConfig의 공통속성인 width가 있을때까지만 에러 없이 동작하고,

 

만약 공통의 프로퍼티가 존재하지 않고 colour 프로퍼티만 존재한다면 에러가 발생하게 됩니다

 

 

 

 

이렇듯 대부분의 정의되지 않는 추가적인 속성은 실제로 버그일 확률이 높습니다

 

이렇게 정의되지 않은 추가적인 속성을 체크하는것을 초과속성체크라고 말하며,

 

초과속성체크 문제가 발생하면 우리는 타입을 다시 고칠 필요가 있습니다

 

이 경우에도 마찬가지로 color와 colour 프로퍼티를 createSquare에 전달하려고 한다면

 

SquareConfig 타입의 정의를 바꿔야합니다

 

 

 

초과 속성 체크를 잉여 속성 체크라고도 하고, 신선도(freshness)라는 용어로도 표현하는데

 

타입스크립트의 초과속성체크를 이해하는데 매우 도움이 되겠습니다

 

 

 

 

참고

https://www.typescriptlang.org/docs/handbook/2/objects.html#excess-property-checks