Typescript - Narrowing & Assertion

오늘의 한마디

당신이 6개월 이상 한 번도 보지 않은 코드는
다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다.
-Eagleson’s Law

앞에서 유니온타입에 대해 알아보았는데 유니온 타입은

let name : string | number

string타입이나 number 타입이라는 뜻이 아니고 저 유니온타입 자체가 타입이다.
그렇기 때문에 함수에서 사용 할경우

function calc(x :number | string){
   return x + 1  //에러남 
}

에러가 나는데 타입을 걸러주는것을 Narrowing 이라고 합니다.

Type Narrowing

Type Narrowing 에도 종류가 몇가지 있는데 알아보자.

1. if문을 이용한 Narrowing

function calc(x : number | string){
  if(typeof x === "number") {
  
  } else if(typeof x === "string"){
    
  }

tpyeof 메서드를 이용하여 x의 값이 ~일때 할 명령어를 설정할 수 있다.

2. instanceof

let 제목 = document.querySelector('#title');
if (제목 instanceof HTMLElement) {
  제목.innerHTML = '반갑소'
}

왼쪽에 있는게 오른쪽에 인스턴스인가 확인하는 것으로도 type Narrowing 할 수 있다.

Narrowing 말고 Assertion이라는 것도 있는데 알아보자.

1. as

function calc(x : number | string){
  let arr : number[] = []
  arr[0] = x // 오류남
  arr[0] = x as number // number 타입으로

as 키워드 특징
1. union type처럼 복잡한 타입이 확정되어 있지않는 경우에 사용가능.
ex) number 타입으로 확정되어있는걸 as string 사용할수 없음.
2. as는 타입으로 주장하는것일뿐 실제 그 타입으로 변경되는것은 아님.

as 키워드는 잠시만 엄격한 타입체크를 안하겠다는것.
웬만하면 Narrowing을 사용하자.
그래도 사용한다면
1. 왜 타입에러가 나는지 정말 모르겠는 상황에 임시로 에러해결용으로 사용하거나
2. 내가 어떤 타입이 들어올지 정말 확실하게 알고 있는데 컴파일러 에러가 방해할 때