[TypeScript] 단언 연산자 !

타입스크립트에서 !를 변수 뒤에 사용하는 것을 단언 연산자, Non-null assertion operator라고 부른다. 이 변수가 Nullish가 아님을 보장한다는 뜻이다.

const $textarea = document.querySelector<HTMLTextAreaElement>("textarea");
$textarea.readOnly = false; // error

이 코드에서 $textarea는 document에 textarea 요소가 없는 경우, null이다. 그리고 이 nullish인 $textarea의 readOnly 속성에 접근하려고 하면 타입 에러가 발생할 것이다.

→ 이런 경우, if나 ?.를 이용해서 에러를 없앨 수 있다.

if($textarea) $textarea.readOnly = false;
// 또는
$textarea?.readOnly = false;

하지만 $textarea를 조작하는 코드가 여러 줄일 때, 모든 코드에 if문이나 ?.를 넣어줘야하기 때문에 귀찮아지고 가독성도 떨어진다.

HTML에 textarea 요소가 무조건 존재하는 경우, 이 방법 대신 사용할 수 있는 것이 단언 연산자이다. !를 뒤에 붙여주면 $textarea 값이 null이 아님을 단언할 수 있고 바로 readOnly 속성에 접근할 수 있다.

const $textarea = document.querySelector<HTMLTextAreaElement>("textarea")!; // 뒤에 !를 붙임
$textarea.readOnly = false;