타입 좁히기

한 입 크기로 잘라먹는 타입스크립트 - 타입 좁히기

1. 타입 좁히기
조건문 등을 이용해 넓은 타입에서 좁은 타입으로 타입을 상황에 따라 좁히는 방법.
if 조건문과 typeof 연산자를 활용한 타입을 좁히는 표현들을 '타입가드' 라고 부른다.
타입가드에는 typeof 뿐만 아니라 instanceof, in 연산자를 조건문에서 활용할 수 있다.

- src/chapter7.ts

/**
 * 타입 좁히기
 */
// value => number: toFixed
// value => string: toUpperCase
function func(value: number | string) {
    value; // 유니온 타입 추론
    // value.toFixed(); // 에러
    // value.toUpperCase(); // 에러
    // if 조건문과 typeof 연산자를 활용한 타입을 좁히는 표현들을 타입가드 라고 부른다.
    if (typeof value === 'number') {
        console.log(value.toFixed()); // number 타입 추론 : 타입 좁히기
    } else if (typeof value === 'string') {
        console.log(value.toUpperCase()); // string 타입 추론 : 타입 좁히기
    }
}

// 타입 가드 예제
type Person = {
    name: string;
    age: number;
};
// value => number: toFixed
// value => string: toUpperCase
// value => Date: getTime
// value => Person: name은 age살 입니다.
function typeGuard(value: number | string | Date | null | Person) {
    if (typeof value === 'number') {
        console.log(value.toFixed());
    } else if (typeof value === 'string') {
        console.log(value.toUpperCase());
    // } else if (typeof value === 'object') { // 자바스크립트 typeof 연산자는 null 값에 typeof 를 해도 object 반환
    } else if (value instanceof Date) { // A instanceof B : A 값이 B 의 인스턴스인지? 즉 A 값이 B 클래스의 인스턴스인지 물어보는 것.
        console.log(value.getTime()); // Date 타입 추론 : 타입 좁히기
    // } else if (value instanceof Person) { // instanceof 연산자 우측엔 타입이 아닌 클래스가 들어와야 한다.
    } else if (value && 'age' in value) { // A in B : A 라는 프로퍼티가 B 라는 값에 있는지?, in 연산자 뒤에 null 이나 undefined 연산자가 오면 안됨
        console.log(`${value.name}은 ${value.age}살 입니다.`);
    }
}

참고링크 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8#

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런