타입스크립트_Narrowing & Assertion

▶️ Type Narrowing

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

• 저번 시간에 배웠던대로, string|number같은 union type 에는 타입으로 연산을 하면 에러가 난다.
• 이런 메세지를 보면 타입을 하나로 Narrowing 해주거나 Asser해주거나 둘 중 하나를 해주면 된다.

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

• Type Narrowing은 if문 등으로 타입을 하나로 정해주는 것을 뜻한다.
• if문과 typeof 키워드로 현재 파라미터의 타입을 검사해서 위처럼 코드를 짜야 정상적으로 사용이 가능하다. 타입이 확실치 않을 때 생기는 부작용을 막기위한 장치라고 보면 된다. (이것을 'defensive하게 코딩한다'라고 부르기도 한다. )
• 함수 안에서 if문을 쓸 때는 마지막에 else{}가 없으면 에러를 내준다. return하지 않는 조건문이 있다면 나중에 버그가 생길 수 있어서 에러를 내주는 것이다.
• 이게 다소 성가시다면 tsconfig.js 파일에서 "noImplicitReturns": false, 를 추가해주도록 하자.
• 반드시 typeof를 쓸 필요는 없고 타입을 하나로 확정지을 수 있는 코드라면 어떤 것도 Narrowing 역할을 할 수 있다. (in, instanceof 키워드도 사용가능)

▶️ Type Assertion(타입 덮어쓰기)

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

• 변수명 as number 라고 써주면 '나는 이 변수를 number라고 주장하겠습니다'라는 뜻이며 실제로 그렇게 타입을 변경해준다.
• 이렇게 쓰려면 '함수에 숫자가 들어올 것이다'라는 사실을 알고 있어야 안전하게 사용이 가능하다.
• as키워드는 union type 같은 복잡한 타입을 하나의 정확한 타입으로 줄이는 역할을 수행한다.
• as 문법은 타입에러가 나는지 모르겠는 상황에 임시로 에러 해결용으로 사용하거나, 내가 어떤 타입이 들어올지 정말 확실하게 알고 있는데 컴파일 에러가 날 때 사용한다.
• 대부분의 상황에서는 as보다 훨씬 엄격하고 좋은 type narrowing으로 해결할 수 있다.