TS - type narrowing, assertion 으로 범위 지정해주기

함수의 파라미터 변수에 union type을 지정해주면 엄격한 타입스크립트에서는

x :number | string 일 때, x + 3 같은 간단한 연산도 안된다. 그럴 때 narrowing으로 타입의 범위를 좁혀준다.

 

function 함수2(x :number | string){
    //console.log(x + 3); // union type은 안된다.
    // if(typeof x === 'number'){ 
    //     return console.log(x + 3);
    // } else {  }

    
    // type narrowing
    let array :number[] = [];
    if(typeof x === 'number') {
        array[0] = x;
    } 

    //type assertion (타입 덮어쓰기)
    // 1. Narrowing 용도
    // 2. 무슨 타입이 들어올지 확실할 때
    array[0] = x as number;

    
}

함수2(2);

if문에서 typeof 타입가드로 x에 number가 들어오면~~ 이렇게 원하는 결과를 얻을 수 있다.

assertion은 같은 타입좁히기로서 타입을 덮어씌워주는데, as를 이용해 어떤 타입이 들어올지 확실할 때 사용함.

 

 

 

예시로 배열로 문자, 숫자를 받으면 숫자배열로만 바꿔주는 함수. type narrowing의 사용범위가 넓겠다.

function cleaning(num :(string | number)[]) {
    const result :number[] = [];

    num.forEach((e)=>{
        if(typeof e === 'string'){
            result.push(parseInt(e));
        } else {
            result.push(e);
        }
    })

    return console.log(result);

}

cleaning(['1','2',3]);