[Typescript] 단언 연산자 느낌표 !(타입단언)

Non-null assertion operator(null 아님 보증 연산자) !

TypeScript에서 ! 연산자는 변수 오른쪽에 붙어 Non-null 단언 연산자로 사용된다.
변수의 타입을 null이나 undefined가 아님을 명시적으로 지정하여 컴파일러에게 알려주는 역할을 한다.

예시로,
카카오맵 컴포넌트가 글 작성 페이지일 때는 setCustomValue라는 함수가 있고,
상세페이지(detailPage)일때는 없다.

"Cannot invode an object which is possibly 'undefined'"

이런 상황에서 쓸 수 있다.

이 컴포넌트에서 setCustomValue가 넘어 올지 않을지 모르는데, undefined일수도 있는데!
setCustomValue!('latitude', mouseEvent.latLng.getLat());라고 작성하면 확실히 있음ㅇㅇ 하는것

근데, 작성하기 전에 type guard를 사용하여
setCustomValue가 null이거나 undefined일 경우를 대비하는것이 좋다.

  const handleClick = (mouseEvent: kakao.maps.event.MouseEvent) => {
    if (detailPage) return; 
    setCustomValue!('latitude', mouseEvent.latLng.getLat());
    setCustomValue!("longitude", mouseEvent.latLng.getLng()); 
  };

detailPage가 true일때는 setCustomValue가 안넘어오기 때문에 return;을 시켜주고
setCustomValue에 !을 붙여주었다.

주의 사항

단언 연산자는 주의해서 사용해야 한다.

• 값이 실제로 null 또는 undefined인지 확인하지 않고 단언 연산자를 사용하면 예상치 못한 결과가 발생할 수 있다.
• 코드의 가독성을 저하시킬 수 있다.

따라서 단언 연산자는 필요한 경우에만 사용하는 것이 좋다.