Typescript - Narrowing

Typescript Narrowing

Typescript Narrowing 이란 타입 에러를 피하기 위해 조건에 따라 변수를 더 정확한 타입으로 좁히는 방법이다.

Typescript Narrowing 방법중 && 연산자를 사용하여 null 또는 undefined type 을 체크해 줄 수 있다.

function narrowFn(a: string | undefined) { // string 타입이 아닌 undefined 타입이 올 경우
    if ( a && typeof a === 'string' ) { // if문으로 narrowing 처리를 하여 string 타입만 허용
        ...
    }
}

 

typeof 연산자는 number, string, boolean, object 등 타입을 지정하는것이 제한적이다.

type키워드로 타입을 narrowing할때는 in 키워드를 사용하여 narrowing 처리를 한다.

type Cat = { meow: string };	// type 키워드로 선언
type Dog = { bow: string };

function myPet (pet : Cat | Dog){ 
    if ( 'meow' in pet ) {	// in 키워드를 사용하여 오브젝트 속에 있는 속성명으로 narrowing
        pet.meow;	// meow 가 있는 타입만 허용이 가능하도록 한다.
    }
}

in 키워드를 사용하기 위해선 베타적인 속성이 있어야 가능하다.

 

 

 

반응형

 

 

 

instanceof 키워드를 사용하여 class를  narrowing 처리를 할 수 있다.

let date = new Date();	// 클래스를 선언한다.
if(date instanceof Date) {	// 왼쪽에는 object를 선언하고 오른쪽에는 부모class를 선언한다
    ...
}

 

비슷한 속성이 여러개 있을때는 intanceof 키워드나 in키워드를 사용하여 narrowing 처리를 할 수 가 없다.

이를 narrowing 처리를 하기위해선 literal type을 넣어서 narrowing처리를 해주어야 한다.

// wheels, color 같은 두개의 속성을 갖고있다.
type Car = {
    wheels: '4개',
    color: string
};

type Bike = {
    wheels: '2개',
    color: string
};

function vehicle(a: Car | Bike) {
    if(a.wheels === '4개') {	// 속성의 literal type을 사용하여 narrowing처리를 한다.
        console.log("a는 Car 타입이다.");	// '4개' 리터럴 타입을 갖는 Car 타입만 올 수 있다.
    }
}