[TS] 느낌표(!) non-null 단어 연산자 ( Object is possibly undefined 에러)

vue3 와  typescript로 개발중 'Object is possibly undefined' 에러가 발생했다.

 

딱 보아하니 'props로 땡겨온 변수가 undefined 일 수 있잖아' 라는 에러 같았다. 

하지만 나는 해당 변수의 default 까지 선언을 해준 상황이라 절대 undefied 혹은 null 값이 될 수 없는 상황이였다..

 

이를 해결하기 위해 해당 변수가 undefined 될 수 없다고 강제 하기로 했고, 느낌표(!) non-null 단어 연산자를 사용했다.사용법은 간단히 변수 옆에 !를 붙여주면 된다.

 

 

 

이는 확정 할당 단언(Definite Assignment Assertions) 이라고 한다. 변수에 값이 무조건 할당되어있다고 컴파일러에게 전달하여 값이 없어도 변수 또는 객체를 사용할 수 있다고 단언하는 것이다.

 

 

 

참고

https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%8A%90%EB%82%8C%ED%91%9C-Non-null-%EB%8B%A8%EC%96%B8-%EC%97%B0%EC%82%B0%EC%9E%90

[TS] 📘 타입스크립트 느낌표(!) - Non-null 단언 연산자