[TypeScript] 타입 단언 / 할당 단언
타입단언 이란?
- 딱 잘라 말함..?
잘못 사용하면 Any처럼 TypeScript를 쓰는 이유가 사라질 수 있습니다.
위의 사진을 보면 HTMLBodyElement | null 로 되어있습니다.
JavaScript에서 document.qserySelector는 선택자를 찾지 못하면 null을 반환합니다.
Ts는 못 찾을수도 있다라는 가정을 합니다.
하지만 홈페이지는 보통 body 태그가 있습니다.. 우리는 알지만 Ts는 코드를 읽고 추론을 하기 때문에
없다라고 인식할 수 있습니다.
여기서 우리는 '아니야 있어' 라고 딱 잘라서 말할수 있는데 이때 사용하는 것이 타입 단언입니다.
아래는 사용 예시입니다.
document.qserySelector 를 통해서 찾은 값은 null이 아닌 HTMLBodyElement Ts에게 라고 말을 해주며
textContent를 사용할 수 있게 됩니다.
두번째 예시입니다. (잘못된 사용방법의 예시입니다.)
null 또는 undefined 일 수 있기 때문에 x가 에러가 뜹니다.
여기서 단언을 사용한다면..?
하지만.. null이 들어갈 수 있습니다.
결국 타입 관련 에러가 나옵니다.
위와 같이 잘못된 단언을 하게될 경우,
코드상에서 에러가 발생하지 않기 때문에 실행 하기 전까지 알 수 없습니다.
올바른 예시 입니다.
코드상에 문제는 없습니다.
isNumber가 true라면 toFixed를 사용하며,
false라면 uoUpperCase를 사용하기 위한 코드입니다.
하지만 Ts는 에러로 인식합니다..
string에 toFixed를 사용할 수 없으며, number에 toUpperCase를 사용할 수 없습니다.
우리는 코드상에 문제가 없다라는걸 알고 있기 때문에
타입 단언을 사용해줍니다.
위의 코드처럼 Ts가 추론을 하지 못한다면.?
우리는 확신하고있기 때문에 위와 같이 타입단언을 사용하면 됩니다.
Non-null 단언 연산자
! 를 사용해서 null이 아니라고 단언을 해주는 방법도 있습니다.
위의 사진또한 마찬가지로 !를 사용할 수 있습니다.
마지막 코드
!는 null 이나 undefined 일 경우에 사용합니다.
위의 코드는 number, string이므로 사용할 수 없습니다.
할당 단언
값이 할당되지 않아서 발생하는 에러 입니다.
: string 을 빼고 본다면 Js의 관점에서는 문제가 없는 코드입니다.
하지만 Ts에서는 값을 할당하지 않았다고 에러로 알려주고 있습니다.
!를 붙여 할당이 된 것 처럼 할 수 있습니다. (Non-null 과는 다릅니다.)
이것 또한 잘 생각하고 써야할 것 같습니다..
다음에는 타입 가드에 대해서 정리 해보겠습니다.