[Typescript] Type Narrowing

📕 Narrowing

Narrowing은 값의 타입이 더 구체적으로 판단 될 수 있는경우

 

타입을 더 좁혀서 구체적으로 추론 할 수 있는 기술입니다.

 

예를 들어 어떤 함수의 매개변수 a가 string | number 같은 유니온 타입일 때

 

타입스크립트에서 함수는 a.toLowerCase()같은건 실행해 주지 않습니다.

 

그 이유는, a에 어떤 타입이 올지 아직 모르기 때문입니다

 

이런경우 Narrowing을 통해서 구체적으로 타입스크립트에게 알려줄 수 있겠습니다

---

🛡️ Type Guards

 

그럼 이제 함수를 만들면서 a에 어떻게 Narrowing을 할지 알아봅시다.

function fn(a : string | number):string{
    if(typeof a === 'string'){
        return a.toUpperCase()
        }
    return a.toLocaleString()  
}

fn('gg')

 

사실 타입 가드라는게 뭔가 특별한게 있다기보다는 typeof 연산자와 조건문을 통하여 예외처리하는 과정과 유사합니다.

 

위 코드에서는 if문을 통해 string인지 검사해주고 조건문 외의 블록에서 자동으로 number형인지 검사해줍니다.

 

단, typeof연산자는 원시타입에서만 사용해야합니다.

 

typeof a === 'object' 이렇게 사용하는것이 가능하긴 한데 객체의 세부 프로퍼티까지 타입이 좁혀지지는 않기 때문에

 

typeof 연산자를 이용하여 객체나 배열의 타입가드는 권장되지 않습니다.

---

🛠️ Narrowing의 기술

그런데 실제로 Narrowing을 하다보면 원하는대로 깔끔하게 Narrowing되는 것이 아닌

 

생각치도 못한 에러가 터지는 것을 확인 할 수 잇습니다.

 

그런 에러들을 막아주는 몇가지 스킬들을 확인해봅시다.

 

 

null 과 undefined를 걸러내기

&&연산자를 사용해 걸러내는 방법이 있습니다.

 

&&연산자의 경우 falsy한 값이 있으면 그 값을 반환합니다.

 

그 결과 조건문안에서 사용될경우 falsy값이 있다면 조건문 실행이 되지 않습니다.

function fn(a: string | null){
    if(a && typeof a === 'string'){
        console.log(a)
        }
        else{
        return
        }
}

 

위 코드에서 a가 만약 null이라면 a && typeof a === 'string' falsy한 값이므로 조건문이 실행되지 않았을 겁니다.

in문을 사용하여 Narrowing

객체안에 진짜 그 키가 있는지 확인하는 in문이 있습니다.

 

이것으로 특정 키가 있는 객체만 좁혀줄 수도 있습니다.

type Fish = { swim : () => void }
type Bird = [ fly : () => void }

function fn( a: FIsh | Bird ){
    if('swim' in a){
        a.swim()
    }
    else{
        a.fly()
    }
}

intanceof를 이용한 Narrowing

Date나 Math같은 생성자 함수의 경우 인스턴스를 검사하여 Narrowing 할 수 있습니다.

 

instanceof는 클래스기반의 타입만 검사하므로 인터페이스나 type에는 사용할 수 없습니다.

 

정말로 Class문법을 사용해서 만들어진 생성자 함수라면, 상속자까지도 검사해 줍니다.

function fn (a : Date | string){
    if(a instanceof Date){
        a.getFullYear()
    }else{
        a.toUpperCase()
    }
}

---

⚠️ never type

함수가 가질 수 있는 타입 중 never타입이란것이 있습니다.

 

never라는 타입은 등장할 수 있는 조건이 있는데요

1. 반환값이 없어야함
2. 함수가 실행이 끝나지 않아야함.

느낌상 void랑 겹치는 느낌인데 왜 never가 따로 사용되는지 알아보자면,

 

모든 함수는 undefined를 return합니다.

 

그렇기 때문에 void도 실은 undefined를 리턴하는 것인데,

 

never는 절대 그럴일이없는 타입입니다.

const fn = () =>{
    throw new Error()
} // never

function fn(a:string){
    if(typeof a === 'string')
    console.log(a)
    }else{
    console.log(a)
    }
}

function fn(){
    while(true){ ... }
}

 

위 예시에서 보이듯 never타입은 내가 직접 지정할 일이 없지만,

 

종종 코드를 위와같이 이상하게 적었을 때 출현합니다.