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

저번 포스팅에 만든 함수에 숫자 또는 문자를 집어넣으면 + 1 해주는 함수입니다.

 

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

근데 이런 에러가 납니다.

 

Operator '+' cannot be applied to types 'string | number' and 'number'

string | number 같은 union type 에는 일반적으로 조작을 못하게 막아놔서 그렇습니다. 

이런 메세지를 보면 1. 타입을 하나로 Narrowing 해주거나 2. 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 키워드로 현재 파라미터의 타입을 검사해서

"이게 'number' 타입일 경우 이렇게 해주세요~"

"이게 'string' 타입일 경우 이렇게 해주세요~"

이렇게 코드를 짜야 정상적으로 사용이 가능합니다. 

타입스크립트는 타입 애매한걸 싫어해서 귀찮아도 하셔야함 

타입이 확실하지 않을 때 생기는 부작용을 막기위한 장치라고 보시면 되겠습니다. 

가끔 이걸 "defensive 하게 코딩한다"라고 하기도 합니다.

 

 

근데 또 함수 안에서 if문 쓸 때는 마지막에 else {} 이거 없으면 에러가 납니다.

return 하지않는 조건문이 있다면 나중에 버그가 생길 수 있어서 에러를 내주는 것인데 

"noImplicitReturns": false, 

이게 성가시다면 tsconfig.js 파일에서 이걸 추가하면 됩니다. 근데 굳이 수정하는 것 보다는 엄격하게 씁시다. 

 

 

- 꼭 typeof를 쓸 필요는 없고 타입을 하나로 확정지을 수 있는 코드라면 어떤 것도 Narrowing 역할을 할 수 있습니다. 

- in, instanceof 키워드도 사용가능합니다.

 

 

 

 

 

 

 

Type Assertion

 

아니면 타입을 간편하게 assert 할 수도 있습니다.

"이 변수의 타입을 number로 생각해주세요"

이런 뜻으로 코드를 짜면 타입스크립트 컴파일러가 눈감아줍니다. 

변수명 as string

이런 식으로 as라는 키워드 쓰면 됩니다. 

 

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

변수명 as number 라고 쓰시면

"나는 이 변수를 number라고 주장하겠습니다~" 라는 뜻이며 실제로 그렇게 타입을 변경해줍니다.

아무튼 이렇게 타입스크립트 컴파일러에게 반기를 들 수 있습니다. 

근데 이러려면 내가 "함수에 무조건 숫자가 들어올 것이다"라는 사실을 알고 있어야 안전하게 쓸 수 있는 문법이겠죠?

 

 

as 키워드 사용시 특징이 있는데 

1. as 키워드는 union type 같은 복잡한 타입을 하나의 정확한 타입으로 줄이는 역할을 수행합니다. (number 타입을 as string 이렇게 바꾸려고 하면 에러날걸요)

2. 실은 그냥 타입실드 임시 해제용입니다. 실제 코드 실행결과는 as 있을 때나 없을 때나 거의 동일합니다.

아무튼 그러면 이제 변수를 숫자로 가정해서 가공할 수 있습니다.

 

 

 

Q. 근데 내함수('123') 이렇게 숫자말고 문자를 입력하면 어떻게 됩니까

A. as number라고 썼긴 했지만 number 타입처럼 +1 해주진 않습니다. 콘솔창에 결과 출력해보면 '1231' 이렇게 출력될걸요

as는 그냥 주장만 하는거지 실제로 타입을 바꿔주는건 아니기 때문입니다. 

 

 

 

as 쓰면 간편해쥬금 하지만 정확히 코드짜려면 narrowing을 씁시다. 

as 키워드는 맘대로 타입을 개발자 맘대로 주장하는 역할이라 때문에 엄격한 타입체크기능을 잠깐 안쓰겠다는 뜻과 동일합니다.

그래서 as 문법은 이럴 때 쓰도록 합시다.

1. 왜 타입에러가 나는지 정말 모르겠는 상황에 임시로 에러해결용으로 사용하거나

2. 내가 어떤 타입이 들어올지 정말 확실하게 알고 있는데 컴파일러 에러가 방해할 때

알겠죠? 뉴비처럼 온갖군데 as 키워드 붙이면 안됩니다. 

물론 대부분의 상황에선 as 보다 훨씬 엄격하고 좋은 type narrowing으로 해결할 수 있습니다.

 

 

 

<출처 : 코딩애플 - 빠르게 마스터하는 타입스크립트>