[vue-decorator-property] @Prop의 ?: 와 !: 의미 feat. typescript)

개요

밑의 코드처럼 prop의 타입으로써 ! ? 붙이는 차이는 무엇?

@Prop({ default: [] }) prop1!: xxx[]
@Prop() prop2?: xxx[]

 

decorator에서 정의된 멤버 변수에 붙어있는 ! 는 Non Null Assertion 오퍼레이터로 불리며,

!이 붙은 속성이 Null/Undefined 가 아님을 뜻한다
단, 는 required: true 또는 기본값이 설정되어 있는 속성에만 지정할 것을 권장

반대로 필수 항목이 아닌 기본값도 지정되어 있지 않다면 ?을 지정하는 것이 좋습니다.

? 의 의미는 undefined의 가능성이 있다는 말이다.

 

최근에 개발환경에서는 문제없이 잘 돌아갔지만, build를 할때 타입에러가 나서 문제가 된적이 있다.

ERROR in /var/www/html/src/components/xxxxx.vue
ERROR in /var/www/html/src/components/xxxxx.vue(xx,xx):
68:16 Type 'xxx[] | undefined' must have a '[Symbol.iterator]()' method that returns an iterator.
    66 |       })
    67 | 
  > 68 |     return [...prop2, ...prop1]
       |                ^
    69 |   }
    70 | 

 FATAL  Nuxt Build Error

spread Operator는 해당 대상이 iterable하지 않으면 쓸 수 없는데 prop를 ?을 붙여나서 undefined 일지도 모른다는 이상한 설정으로

빌드에러가 난적이 있어서 기록해둔다.