안녕하세요, 단테입니다.
오늘은 잘 모르실 수 있는 tsconfig.json 의 compilerOptions 설정인 exactOptionalPropertyTypes에 대해 알아보겠습니다.

이 설정은 TS 4.4버전에서 추가되었습니다.

공식 문서는 아래 링크에 남겨놓겟습니다.

문서: https://www.typescriptlang.org/tsconfig#exactOptionalPropertyTypes

쓰면 좋은데 잘 모르는거

exactOptionalPropertyTypes 옵션을 키면, 타입스크립트는

아래와 같은 에러를 발생시킵니다.

Option 'exactOptionalPropertyTypes' cannot be specified without specifying option 'strictNullChecks'.ts

즉 structNullChecks 옵션을 같이 사용해야 합니다.

타입 체크를 더 명확하게

라이브러리 컨트리뷰터는 UserDefaults 인터페이스 생성시 다음과 같이 colorThemeOverride 키를 optional property로 정의했습니다.

interface UserDefaults {
  // The absence of a value represents 'system'
  colorThemeOverride?: "dark" | "light";
}

exactOptionalPropertyTypes: on

설정이 켜있으면 UserDefaults 인터페이스를 파라메터로 넘길 때 colorThemeOverrideproperty가 ? prefix로 타입이 설정되어있어도 dark, light 값이 아닌 undefined값을 명시적으로 파라메터에 포함시킬 수 없습니다.

예제코드를 작성해보겠습니다.

export interface UserDefaults {
  // The absence of a value represents 'system'
  colorThemeOverride?: "dark" | "light";
}

const createThemeContext = (themeUser: UserDefaults)  => {
  //  
  themeUser
}


const colorThemeOverride: UserDefaults["colorThemeOverride"] = undefined;

createThemeContext(!colorThemeOverride ? {colorThemeOverride} : {})

colorThemeOverride가 undefined일 때 UserDefaults 타입 파라메터에 colorThemeOverride를 포함시킬 수 없습니다.

Argument of type '{ colorThemeOverride: undefined; } | {}' is not assignable to parameter of type 'UserDefaults' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
  Type '{ colorThemeOverride: undefined; }' is not assignable to type 'UserDefaults' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
    Types of property 'colorThemeOverride' are incompatible.
      Type 'undefined' is not assignable to type '"dark" | "light"'.ts(2379)

exactOptionalPropertyTypes: off

tsconfig.json에서 아래와 같이 두 키 값을 없애버리면 에러가 발생하지 않습니다.

"exactOptionalPropertyTypes": true,
"strictNullChecks": true

언제 써야할까

타입스크립트 라이브러리 제작할 때

TS 라이브러리 제작자마다 다르게 생각할 수 있지만
인터페이스에 optional property로 선언한 값은

라이브러리 로직에서 해당 키 값이 없으면 사용하지 않겠다는 것을 의미하므로 키에서 명시적으로 undefined 값을 바인딩 하지 못하게 하는 것이 더 정확합니다. 로직상 undefined면 해당 키 값을 무시하겠다는 의미와 동일하기 떄문에 내부 로직에서 아래와 같이 Object.keys를 사용하는 등의 잼재적인 문제를 제외할 수 있습니다.

글을 마치며

오늘은 TS 컴파일러 설정 중 exactOptionalPropertyTypes 에 대해 알아보았습니다.

감사합니다.