ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Typescript - Narrowing & Assertion
    Front-end/Typesrcipt 2023. 4. 12. 14:41
    728x90
    반응형

    Tyepscript Narrowing

    Tyepscript Narrowing이란 타입이 하나로 확정되지 않았을 경우

    Type Narrowing을 통해 타입을 조건별로 나누어주는것이다.

    function myFn(x: number|string): number {	// 파라미터 타입이 하나로 정의되어있지 않다.
        return x + 10;
    }

     

    위의 함수에러를 수정하기위해 Narrowing을 해줘야한다.

     

     

    반응형

     

     

    Typeof 연산자

    typeof 란 대표적으로 사용되는 Narrowing 방법중 하나는 typeof 연산자를 사용하여 처리하는것이다.

    function myFn(x: number | string) {	// 2가지 타입이 들어올 수 있다.
        if (typeof x === 'string') {	// typeof 연산자를 통해 Narrowing 처리
            return x + '10';
        } else {
            return x + 10;
        }
    }

     

     

     

     

    assertion 문법

    assertion 이란 as 키워드를 사용하여 타입을 덮어씌워주는 방법이다.

    as 문법의 주의점으로는 Narrowing할 때 여러개의 타입을 하나의 타입으로 확정할때 사용하지만

    타입을 number에서 string으로 변경하는 목적으로 사용하면 안된다.

    as 문법은 어떤 타입이 들어갈지에 대해 확신이 있을때 사용해야한다.

    as 문법의 사용은 비상용(디버깅)으로 사용한다.

    as 문법보단 if문으로 타입을 확실히 하나로 선택해주는게 좋다.

    function myFn(x: number|string) {
        let arr: number[] = [];	
        arr[0] = x as number;	// as 키워드를 사용하여 number타입으로 변환한다.
    }
    
    
    myFn(3);	// number타입의 값이 들어가도 허용
    myFn('3');	// string타입의 값이 들어가도 허용

     

    728x90
    반응형

    'Front-end > Typesrcipt' 카테고리의 다른 글

    Typescript - Literal Types  (0) 2023.04.13
    Typescript - Type Alias  (0) 2023.04.12
    Typescript - function parameter, return  (0) 2023.04.12
    Tyepscript - Union, any, unknown  (0) 2023.04.12
    Typescript - Primitive Types  (0) 2023.04.12
Designed by Tistory.