(TypeScript) - TypeScript 타입 좁히기

■ 타입 좁히기

: 조건문 등을 이용해 넓은 타입에서 좁은 타입으로 타입을 상황에 따라 좁히는 방법이다.

 

// value => number: toFixed
// value => string: toUpperCase
function func(value: number | string) {
    value; //불가능
    value.toUpperCase();
    if (typeof value === 'number') {
        console.log(value.toFixed()); // number 로 추론
    } else if (typeof value === 'string') {
        console.log(value.toUpperCase()); // string 로 추론
    }
}

 

다음과 같이 value 로 찍었을때는 toUpperCase 와 toFixed 메서드 둘 다 불가능하다.

 

하지만 조건문을 통해 추론이 가능할 경우에는 타입스크립트가 자동으로 더 좁은 타입으로 추론해서

해당 메서드의 타입이 추론 가능해서 메서드 오류가 나지 않는다.

 

    if (typeof value === 'number') {

 

이렇게 다음 코드처럼 넘버 타입 이외에는 다른 타입이 들어가지 못하도록 타입을 제한하는 것을 타입 가드라고 한다.

 

// value => number: toFixed
// value => string: toUpperCase
// value => Date: getTime
function func(value: number | string | Date | null) {
    if (typeof value === 'number') {
        console.log(value.toFixed());
    } else if (typeof value === 'string') {
        console.log(value.toUpperCase());
    } else if (typeof value === 'object') { 
        console.log(value.getTime());
 // 오류 발생 Date 또는 null 타입으로 추론
    }
}

 

만약 여기서 value 값을 Date 랑 null 을 추가하게 되면 object 로 타입 가드를 설정하면 제대로 걸러내지 못한다.

왜냐하면 Date 또는 null 타입으로 추론하기 때문에 Date 만 사용 가능한 getTime() 메서드가 오류가 나기 때문이다. 

 

    } else if (value instanceof Date) {
        console.log(value.getTime());
    }

 

따라서 다음과 같이 instanceof 를 사용하면 된다.

 

instanceof 는 왼쪽에 있는 값이 오른쪽 값의 인스턴스인지 물어보는 것이다.

즉, Date 인스턴스 값으로 value 가 왔을 때만 걸러지게 되므로 타입 오류가 발생하지 않게 된다.

 

type Person = {
    name: string;
    age: number;
};

    } else if (value instanceof Person // 불가능) {
        console.log(`${value?.name}은 ${value?.age}살 입니다.`);
    }

 

우리가 별도로 만든 type Person 은 instanceof 사용이 불가능하다.

 

왜냐하면 여기서 Person 은 타입으로 취급되는데

instanceof 메서드 자체는 엄밀히 말하면 객체의 인스턴스를 비교하는 것이기 때문에 type 이 들어와서는 안된다.

 

    } else if (value && 'age' in value) {

 

이럴 때에는 in 연산자를 쓰면 된다.

value 가 존재하면서 그 value 안에 'age' 가 있는지를 물어보면 타입 좁히기가 가능하다.