non-null 단언 연산자
!모양의 연산자다.
코드 줄 뒤에 느낌표!를 붙임으로써 절대 null이 되지 않는다고 Typescript에게 알리는 것이다.
아래 예시 코드에서 btn.addEventListener()는 const btn = document.getElementById("btn")!의 단언 연산자가 없으면 이런 에러를 발생합니다.
'btn'은(는) 'null'일 수 있습니다.
하지만 단언 연산자!를 넣어줌으로써 해당 에러를 해결할 수 있습니다.
// index.ts
const btn = document.getElementById("btn")!;
btn.addEventListener("click", function () {
alert("클릭클릭");
});요약
!을 사용함으로써null이 아닌 다른 값이 존재하는 것을 확실하게 합니다.- 단언 연산자
!는 값이 확실하게 존재하고, null 값이 절대 아닐 때만 사용합니다.- 값이 불확실하다 판단되면 사용하지 말아야 하는 연산자입니다.
Typescript연산자입니다.Javasctipt연산자가 아닙니다.
타입 단언 (Type Assertions)
개념 :
Typescirpt에 선언하는 것as로 표현한다.
타입스크립트보다 해당 변수에 적합한 타입을 내가 더 많이 알고있다면 사용할 수 있는 방법이다.
예시로 억지 코드가 아래 있습니다.
.length를 사용하려하는데, 타입스크립트가 string 타입을 제대로 인지하지 못한다는 가정하에 아래 코드처럼 사용할 수 있을 것 같습니다.
// 타입 단언
// index.ts
let stringWord: unknown = "오렌지바나나";
const numChars = (stringWord as string).length;
console.log("numChars : ", numChars); // 6
// 타입 단언
const input = document.getElementById("todoinput")! as HTMLInputElement;
btn.addEventListener("click", function () {
alert(input.value);
input.value = "";
});
as를 사용한다고해서 변수stringWord의 기본 타입이 바뀌지는 않습니다. 여전히unknown타입입니다.
하지만(stringWord as string)즉, 소괄호()안에 컨텍스트에서는 string 타입으로 취급되고 있습니다.
단점으로는 "오렌지바나나"가 아니라 숫자인 100, 5, 2가 들어와도 실행전까지 에러를 뱉지 않습니다.
타입 단언의 대체 구문
<>로as키워드를 대체할 수 있습니다.
const input = document.getElementById("todoinput")!
(<HTMLInputElement>input).value❗️
<>이 구문은 일반적이지 않고, JSX에서는 동작하지 않는다.
React에서는 오류를 내뿜습니다. 왜냐하면<>는 HTML을 작성하는 데 사용되기 때문입니다.
때문에 일반적으로<>로 타입 단언을 하지 않고as로 적용합니다.
제네릭<>와는 다른 이야기입니다.
