[TypeScript] Narrowing & Assertion

이진경·2023년 2월 22일
0

🌐 TypeScript

목록 보기
5/10
post-thumbnail

✅ Narrowing

Narrowing은 타입이 아직 하나로 확정되지 않았을 경우(예를들면 union타입) 사용한다.

   const narrowing = (num: string | number) => {
        return num + 2;
    };

위 코드같은 경우에서는 num의 타입이 string|number 두개로 지정되어 있어서 <num + 2> 와 같은 연산을 하면 오류가 발생한다.

이럴때는 if문등으로 Narrowing을 해줘야 조작이 가능하다.

    const narrowing = (num: string | number) => {
      ⭐️ if (typeof num === 'string') {
            return num + 2;
        } else {
            return num + 2;
        }
    };

    narrowing(3); //5

✍️ Narrowing으로 판정해주는 문법

  • if문
  • typeof 변수
  • 속성명 in 오브젝트 자료
  • 인스턴스 instanceof 부모

💡 if문 사용시 else까지 써줘야 안전하다.

✅ Assertion

Assertion도 타입이 하나로 정해져 있지 않은 경우에 사용한다. Narrowing과 다른점은 Assertion은 타입을 덮어쓰기 한다는 점이다.

    const assertion = (x: number | string) => {
        let array: number[] = [];

        array[0] = x 
    };

위 코드에서도 x의 타입이 number|string 두개로 지정되어 있어서 <array[0] = x> 처럼 대입했을때 오류가 발생한다.

    const assertion = (x: number | string) => {
        let array: number[] = []; 

        array[0] = x as number; ⭐️
    };

이렇게 지정하면 xnumber타입으로 지정이 된다.

🌈 Assertion 문법의 용도

  • Narrowing할때 사용한다.
let name :string = 'jinkyung'

name as number -> 😡
- 위 코드처럼 타입을 변경할때는 사용하지 않는다!! 
  • 무슨타입이 들어올지 확실하게 알고 있는 경우에만 사용한다.
  • 디버깅이나 비상용으로만 사용하고 Narrowing 사용을 지향하자!
profile
멋찐 프론트엔드 개발자가 되자!

0개의 댓글