[TIL] Typescript 'is'와 'as' 의 차이점

오늘은 짧게 배운 내용에 대해서 간략하게 적어보겠습니다.

아무래도 논리로만 배우다 보니까 머리속에 들어와싸가 나가는 느낌이라서
글로 정리를 해야겠다고 생각했습니다.

언 뜻 보면 is 와 as는 둘이 비슷하게 생겼으므로 비슷한 역할일 것이라고 생각하는데
둘은 전혀 다른 역할을 합니다.

as

타입 단언 : as
굳이 개발자가 타입 지정을 하지 않아도 TS 컴파일러가 추론이 가능한 타입 추론 기능이 타입스크립트에는 있다.
이럴 때 as를 쓴다. 그리고 바로 이것이 타입 단언

// 타입 단언에는 두 가지 종류가 있다.
1: <Fish>pet 
2: (pet as Fish)

이 때 1 번은 런타임과 컴파일 단계에서 모두 돌아가고
2 번은 컴파일 때만 돌아간다.

또 만약 리액트로 개발할 시 꺽쇠(<>)로 타입캐스팅 하는 것은 TSX 태그 문법이랑 비슷하기 때문에 as 를 추천한다.

is

타입 가드 : is
typeof 같은 걸로 타입 따져서 분기 처리 하는 역할을 TS 에선 is 이다.

if (isFish(Fish 타입 인 애)) { // isFish에서 Fish 타입이면 타입 가드에 의해서 조건문 통과
  console.log(Fish 타입인 애); // OK
  console.log(Bird 타입인 애); // Error
} else { // Bird 타입인 애가 들어가면 여기로!
  console.log(Fish 타입); // Error
  console.log(Bird 타입); // OK
}