[typescript] optional 속성에 undefined를 할당할수 있을까?

typescript의 옵션중에서 exactOptionalPropertyTypes 옵션이 있습니다

 

이 옵션은 기본적으로는 disabled 상태입니다

 

이 옵션이 무슨 옵션인지 한번 알아볼까요

 

일단 exactOptionalPropertyTypes 이름을 해석해보면

 

"정확한 옵셔널 프로퍼티 타입" 입니다

 

옵셔널 프로퍼티 타입이 정확하다는 말이죠

 

이 말 뜻이 무엇일까요?

 

interface UserDefaults {
  colorThemeOverride?: "dark" | "light";
}

 

typescript의 기본설정(exactOptionalPropertyTypes가 disabled)에서는

 

colorThemeOverride는 

 

dark, light 뿐만아니라 undefined 까지 세개의 값을 가질수 있습니다

 

dark, light만 선언했는데

 

interface UserDefaults {
  colorThemeOverride?: "dark" | "light" | undefined;
}

 

이렇게 해석되고 있습니다

 

 

그렇기 때문에 아래의 코드는 모두 정상코드입니다

const userDefaults1 : UserDefaults = {} // OK
const userDefaults2 : UserDefaults = {
  colorThemeOverride: undefined
} // OK
const userDefaults3 : UserDefaults = {
  colorThemeOverride: "dark"
} // OK
const userDefaults4 : UserDefaults = {
  colorThemeOverride: "light"
} // OK

 

그런데 분명 해당 속성이 없는것과 해당 속성이 undefined인것은 다르지말입니다

 

기본설정에서는 optional 프로퍼티에 대해서 undefined를 할당할수 있도록 되어있습니다

 

그러면 이 상황에서 해당 프로퍼티가 있는지 조사를 하게 되면 어떻게 될까요?

 

'colorThemeOverride' in userDefaults1 // 해당 프로퍼티를 선언 안했으므로 false
'colorThemeOverride' in userDefaults2 // 프로퍼티가 선언되어있지만 undefined이므로 true

 

이런 결과를 리턴하게 됩니다

 

undefined를 통해서 optional로 설정하려고 했던 행동은

 

undefined를 할당함으로서 'colorThemeOverride' in userDefault2에서 true를 리턴하는 결과를 가져왔습니다

 

의도했던 바와 다르게 동작할 우려가 있습니다

 

 

exactOptionalPropertyTypes옵션을 enable 시키면 어떻게 될까요

 

 

Type 'undefined' is not assignable to type "dark"  | "light"

 

colorThemeOverride는 optional일뿐 undefined는 타입에 선언되어있지 않기 때문에

 

undefined를 할당하려는 행위가 컴파일 타임에서 오류를 리턴하게 됩니다

 

 

원하는 json 형태를 리턴하고자 할때 optional로 처리하여 해당 필드가 리턴되지 않도록 하기 위해 undefined를 선언하는 경우를 종종봅니다

 

선언이 되지 않은것(undefined)과 있는지 없는지(optional)는 분명 다른 것이라는것을 인지하여 개발하면 좋겠네요