[TypeScript] 타입 확정하기 Narrowing & Assertion

타입 확정하기 Narrowing & Assertion

function plus(x: number | string) {
  return x +1
} // 이러면 에러가난다 왜?

return에 x가 number | string 같은 union type 에는 일반적으로 조작을 못하게 막아놔서 그렇다.
그래서 union type은 어떻게사용하는건데!?🤬
Operator '+' cannot be applied to types 'string | number' and 'number' 이런 메세지를 보면
1. 타입을 하나로 Narrowing 해주거나
2. Assert 해주거나 둘 중 하나 해주면된다!

Type Narrowing

If문 등으로 타입을 하나로 정해주는것을 뜻한다

function plus(x: number | string) {
  if(typeof x === "number") {
    return x + 1
  } else if (typeof x === "string") {
    return x + 1
  } else {
  	return 0
  }
}

이런식으로 타입을 확정지어주어야만 정상적으로 사용이 가능하다.
타입스크립트는 타입이 애매한걸 싫어해서 귀찮아도 해야한다!

Type Assertion

변수명 as (type)

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

위 처럼 사용하게되면 "나는 이 변수를 number라고 주장하겠습니다~" 라는 뜻이며 실제로 그렇게 타입을 변경해준다.

as 키워드 사용시 특징
1. as 키워드는 Union type 같은 복잡한 타입을 하나의 정확한 타입으로 줄이는 역할을 수행한다.(number 타입을 as string 이렇게 바꾸면 에러남!)
2. 사실은...타입 해제(?)용 이라고한다. 실제 코드 실행결과는 as키워드가 있을 때나 없을 때나 거의 동일하다.

as를 사용하면 간편하다 하지만 정확히 코드를 짜려면 narrowing을 사용하는게 좋다👍

그럼 언제 사용하는게 좋아??

1. 왜 타입에러가 나는지 정말 모르겠는 상황에 임시로 에러해결용으로 사용하거나
2. 내가 어떤 타입이 들어올지 정말 확실하게 알고 있는데 컴파일러 에러가 방해할 때

Assertion 옛날에는....

let name: number = 123;
(name as string) + 1 // 현재는 이러한 모습으로 사용한다
<string>name + 1 // 옛날에는 이런모습으로 사용했는데 HTML태그랑 비슷해 지금은 잘 사용하지않는다