TypeScript | Narrowing과 Assertion

function 내함수(x :number | string) {
  return x + 1
}

위 코드는 에러가 발생하는 코드이다. 에러 메세지를 보면 Operator '+' cannot be applied to types 'string | number' and 'number'을 확인할 수 있는데, 함수는 union type에 일반적으로 조작을 못 하게 하기 때문이다. 그래서 타입을 하나로 Narrowing 해주거나, Assert 해주면 된다.

Type Narrowing

👉 if문 등으로 타입을 하나로 정해주는 것

function 내함수 (x :number | string) {
  if (typeof x === 'number') {
    return x + 1
  }
  else if (typeof x === 'string') {
    return x + 1
  }
  else {
    return 0
  }
}

이렇게 if문과 typeof 키워드로 현재 파라미터의 타입을 검사해야 정상적으로 사용이 가능하다.
타입이 확실하지 않을 때 생기는 부작용을 막기 위한 장치!
함수 안에서 if문을 쓸 때는 마지막에 else {}를 꼭 써줘야한다.
이유 : return 하지 않는 조건문이 있다면 나중에 버그가 생길 수 있기 때문에

Type Assertion

👉 union type 같은 복잡한 타입을 하나의 정확한 타입으로 줄이는 것

function 내함수(x :number | string) {
  return (x as number) + 1
}

변수명 as number는 이 변수의 타입을 number로 변경하는 것이다.

as는 간편하지만, 코드를 정확히 짜려면 narrowing을 사용하는 것이 좋다.
as는 타입을 개발자 마음대로 주장하는 역할이기 때문에 엄격한 타입 체크 기능을 사용하지 않겠다는 뜻과 같기 때문이다.

as 문법은 언제 사용하는가?
1. 타입에러가 왜 나는지 모르겠는 상황에서 임시로 사용
2. 어떤 타입이 들어올 지 확실하게 알고 있는데 컴파일러 에러가 방해할 때 사용