타입스크립트 -Narrowing, Assertion

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

위 코드는 에러가 난다. 전에 말했듯 파라미터가 union type이기에 그렇다. 이러한 경우 해결방법으로 Narrowing과 Assertion이 있다.

Narrowing

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

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

f문과 typeof 키워드로 현재 파라미터의 타입을 검사해서 'x의 타입이 number이면 ~~', 'x의 타입이 string이면 ~~' 이렇게 짜면 코드가 정상적으로 작동한다.

그리고 함수 안에서 else{} 가 없으면 에러가 나는데 return 하지 않은 조건문이 있다면 나중에 버그가 날 수 있어서 에러를 내주는 것이다. tsconfig.js파일에서 '"noImplicitReturns": false,' 이걸 추가해주면 되는데 엄격하게 else{}를 추가하는 것이 낫다.

Assertion

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

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

변수명 as number라고 쓰면 '이 변수는 무조건 number입니다.' 라는 뜻이고 실제로 그렇게 타입을 변경해준다. 그런데 이는 변수가 무조건 숫자가 들어온다는 사실을 알고 있어야 안전하게 쓸 수 있다.

따라서 as문법은 그저 타입체크기능을 잠시 사용하지 않겠다는 뜻과 동일하므로 이럴 때 쓴다.

• 왜 타입에러가 나는지 모르겠는 상황에 임시로 에러해결용으로 사용
• 내가 어떤 타입이 들어올지 확실하게 알고 있는데 에러가 날 경우 해결용으로 사용