[TypeScript] 타입스크립트 조건부 타입(Conditional Type)

(본 내용은 타입스크립트 2.8^ 버전을 기준으로 작성한다.)

조건부 타입(Conditional Type)

조건부 타입은 타입을 결정하는 새로운 방법으로 아래와 같은 문법 구조를 가지고 있다.

T extends U ? X : Y

여기서 T, U, X, Y는 모두 타입이다. 위 구문을 해석해 보면 보다 쉽게 이해가 된다.
"T 타입이 U에 할당 가능한 타입이면 X라는 타입이고, 아니면 Y라는 타입이다."

간단한 예제를 보자.

interface Human {
    intro(): void;
}

interface Student extends Human {
    study(): void;
}

type Person = Student extends Human ? number : string; // Pserson은 number 타입이다.

const master: Person = 'string'; // Type '"ba"' is not assignable to type 'number'.
const jung: Person = 28;

위 해석과 대입해서 주석과 함께 보면 이해가 바로 될 것이다.
근데 과연 이건 언제 쓰는 것일까? 위 예제만 보면 유용성이 0으로 보이지 않는가...

---

조건부 타입의 활용

여기서 중요한 것은 삼항 연산자로 이 아이를 바라보면 안된다. 오로지 타입끼리 조건에 따라 결정한다라고 이해하는 것이 중요하다.
아래 예제를 보자.

function getPerson(name: string): string;
function getPerson(id: number): string;
function getPerson(property: any): string {
    if(typeof property == 'string'){
        return "getPerson by name string";
    }else if(typeof property == 'number'){
        return "getPerson by id number";
    }
    return 'customer';
}

console.log(getPerson(28));
console.log(getPerson('master'));

함수 오버로드를 이용해 getPerson() 함수를 시그니처 갯수만큼 호출했다.
이 예제에 조건부 타입을 이용하면 좀 더 간결한 코드를 작성할 수 있다.

type IdOrName<T extends number | string> = T extends number ? number : string;
function getPerson(idOrName: IdOrName<number|string>): string {
    if(typeof idOrName == 'string'){
        return "getPerson by name string";
    }else if(typeof idOrName == 'number'){
        return "getPerson by id number";
    }
    return 'customer';   
}

console.log(getPerson(28)); // getPerson by id number
console.log(getPerson('master')); // getPerson by name string