<div id="readability-page-1" class="page"><div>
 <a href="/m/category/WEB2.0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D">WEB2.0/프로그래밍</a><h3>[typescript] optional 속성에 undefined를 할당할수 있을까?</h3>
 </div><cite>나를찾는아이</cite>
 2023. 7. 12. 10:52
 <div>
 typescript의 옵션중에서 exactOptionalPropertyTypes 옵션이 있습니다

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

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

일단 exactOptionalPropertyTypes 이름을 해석해보면

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

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

이 말 뜻이 무엇일까요?

<pre id="code_1689124696484" data-ke-language="bash" data-ke-type="codeblock"><code>interface UserDefaults {
 colorThemeOverride?: "dark" | "light";
}</code></pre>

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

colorThemeOverride는&nbsp;

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

dark, light만 선언했는데

<pre id="code_1689126321255" data-ke-language="bash" data-ke-type="codeblock"><code>interface UserDefaults {
 colorThemeOverride?: "dark" | "light" | undefined;
}</code></pre>

이렇게 해석되고 있습니다


그렇기 때문에 아래의 코드는 모두 정상코드입니다
<pre id="code_1689125891260" data-ke-language="bash" data-ke-type="codeblock"><code>const userDefaults1 : UserDefaults = {} // OK
const userDefaults2 : UserDefaults = {
 colorThemeOverride: undefined
} // OK
const userDefaults3 : UserDefaults = {
 colorThemeOverride: "dark"
} // OK
const userDefaults4 : UserDefaults = {
 colorThemeOverride: "light"
} // OK</code></pre>

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

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

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

<pre id="code_1689126086218" data-ke-language="bash" data-ke-type="codeblock"><code>'colorThemeOverride' in userDefaults1 // 해당 프로퍼티를 선언 안했으므로 false
'colorThemeOverride' in userDefaults2 // 프로퍼티가 선언되어있지만 undefined이므로 true</code></pre>

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

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

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

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


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

<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-07-12 오전 10.43.04.png" data-origin-width="2170" data-origin-height="888">
 
 <img src="https://blog.kakaocdn.net/dn/bfWT5u/btsnkMR4c7V/Snke6iyiCbfo6flgWYQC7K/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2023-07-12 오전 10.43.04.png" data-origin-width="2170" data-origin-height="888">
 
 
</figure>

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

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

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


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

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

나를 찾는 아이

Kyoung min, Kim

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)는 분명 다른 것이라는것을 인지하여 개발하면 좋겠네요

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

댓글