타입 스크립트 - 타입 단언과 할당 단언

김영준·2023년 7월 29일
0

TIL

목록 보기
33/91
post-thumbnail

타입 단언(Assertion)

"단언"이란 "주저하지 아니하고 딱 잘라 말함" 이라는 뜻을 갖고 있다.

타입 스크립트가 정확하게 알 수 없는 타입을 개발자가 알고 있을 때 해당 타입을 타입 스크립트한테 단언 해 줄수 있다.

as, ! (Non-null 단언 연산자)로 타입 단언을 할 수 있다.


아래 예제를 보면 btn 변수가 에러를 표시한다.
그 이유는 DOM 요소에 button이 존재하지 않으면 찾을 수 없기 때문에 btn은 null일 가능성을 갖고 있기 때문이다.

소괄호와 as 키워드를 사용하여 btn이 무조건 HTMLButtonElement 타입이라는 것을 단언할 수 있다.

하지만 btn을 사용할 때 마다 단언을 해줘야 하기 때문에 번거로움이 발생한다.

할당문에서 단언을 사용하면 이 문제를 해결할 수 있다.

as 키워드가 아닌 !(Non-null 단언 연산자)로도 사용 가능하다.
최소한 null이나 undefined가 아니다. 라는 것을 단언해 주는 것이다.

물론 변수를 사용할 때도 사용 가능하다.
하지만 역시 btn을 사용할 때 마다 단언을 해줘야 하기 때문에 할당문에서 선언하는 것이 좋다.


다른 예제를 살펴보자.
아래 예제는 val 매개변수가 number 타입일 수도 있고 string 타입일 수도 있다. 따라서 함수들에 오류가 발생하는 것을 알 수 있다.

현재 코드에서는 isNum을 통해 해당 val 함수의 타입을 확인할 수 있으므로 as 키워드를 통해 단언할 수 있다.


또 다른 경우로는 string 타입의 문자를 json형식으로 변환 후 없는 속성인 emial을 출력하고 있다.

이 때 타입스크립트는 에러를 나타내지 않는다.

string 데이터가 json으로 변환 후의 결과까지는 타입스크립트가 예측하지 못하기 때문이다.

이 때도 JSON으로 바꾸는 구문 뒤에 as 키워드로 단언을 해주면 된다.


할당 단언

자바스크립트에서 변수를 선언만 하고 초기화를 하지 않으면 undefined가 할당 된다.

number 타입에 undefined가 할당되어 num 변수를 사용하려고 하면 에러가 발생된다.

이 때 변수 뒤에 !(Non-null) 단언 연산자를 사용하여 에러를 해결할 수 있다.

이 것을 "할당 단언"이라고 한다.

profile
꾸준히 성장하는 개발자 블로그

0개의 댓글