[TypeScript] Narrowing, Assertion

유니온 타입은 새로운 타입을 만드는 것이기 때문에 수학 연산이 불가능하다

function sum(x :number | string) {
    return x + 1
}

sum(123)
//에러 발생

 

string + 1(가능)

number + 1(가능)

string | number + 1(불가능)

 

에러가 나지 않게 하기 위해서는 1. Narrowing을 해주거나, 2. Assert를 해주면 된다

 

 

 

1. Narrowing

애매한 타입(union type)을 가지고 있을 때, 추가적인 타입 체크나 할당을 이용해 변수의 타입을 작은 범위로 좁혀주는 것(정해주는 것)을 뜻한다

타입이 확실하지 않을 때 생기는 부작용을 막기 위한 장치

function sum(x :number | string) {
  if(typeof x === 'string') {
    return x + '1'
  } else {
    return x + 1
  }
}

sum(123)

 

✅ 함수 안에서 if문을 쓸 때 마지막에 else가 없으면 에러가 날 수 있다

이런 에러가 귀찮다면  "noImplicitReturns": false 를 tsconfig.js 파일에 추가하자

 

---

 

 typeof 

타입을 반환하는 연산자로서 데이터 타입을 확인할 때 사용한다

반환 값 : string / number / bigint / boolean / symbol / undefined / object / function

참고로 null은 object를 반환한다

 

*꼭 typeof를 쓸 필요는 없고, in, instanceof 연산자를 이용해 narrowing 할 수 있다

 

 in 

특정 키 in 객체

해당 객체 안에 특정 키가 있는지 확인할 때 사용한다

 

 

 instanceof 

인스턴스 instanceof 부모

해당 객체가 어떤 생성자 함수를 사용하여 생성되었는지 여부(boolean) 반환

 

 

 

2. Assertion

narrowing 간소화(?) 버전

하나의 타입으로 확정하고 싶을 때 사용한다

function sum(x :number | string) {
  let arr :number[] = []
  arr[0] = x as number 👈
}

sum(1)

"x는 숫자다!" 라고 주장하는 것이기 때문에 무슨 타입이 들어올지 알아야 사용 가능하다

 

 

✅ assertion는 간편하지만, 정확히 코드를 작성하기 위해서는 narrowing을 사용해야 한다

as는 타입 체크 기능을 임시로 해제하는 것과 마찬가지기 때문이다

function sum(x :number | string) {
  let arr :number[] = []
  arr[0] = x as number
}

sum('1') //👈 x에 string을 넣어도 에러가 나지 않는다

as는 왜 타입 에러가 일어났는지 모를 때 비상용으로 사용하자

 

 

 

Ref

https://codingapple.com/course/typescript-crash-course/

빠르게 마스터하는 타입스크립트 - 코딩애플 온라인 강좌