[Typescript] Typescript Infer / 조건부 타입(Conditional Types)

infer keyword 란?

 

infer 키워드는 TypeScript에서 조건부 타입(Conditional Types)과 함께 사용되어 특정 타입의 정보를 추론할 수 있게 합니다. 

주로 타입의 일부를 추출하거나 변환하는 데 유용합니다.

infer 키워드를 사용하면 타입을 변수처럼 선언하고 조건부 타입 내에서 이를 활용할 수 있습니다.

 

infer 키워드를 사용하는 것이 유리한 상황은 주로 복잡한 타입을 다룰 때입니다.

infer는 타입 시스템을 보다 강력하고 유연하게 만들어 주며, 타입 추론을 자동화함으로써 코드의 유지보수성을 높여줍니다.

 

infer 키워드는 조건부 타입 내부에서만 사용할 수 있습니다.

컨디셔널 타입의 참 부분에만 infer된 타입 변수를 사용할 수 있다. 거짓 부분에서 쓰려고 하면 에러가 발생합니다.
왜 그런지는 생각해 보면 당연합니다.
infer를 통해서 추론할 수 있다면 참으로, 없다면 거짓으로 가게 되는데 infer를 통해서 타입을 추론할 수 없다면 해당 타입을 결정할 수 없다. 따라서 infer를 통해서 타입을 결정할 수 있는 참 부분에서만 infer를 통해 만들어진 타입 변수를 사용할 수 있는 것입니다.

 

1. 간단한 infer 예시

type Unpack<T> = T extends (infer U)[] ? U : T;

// string[] 타입의 요소를 추출
type Test1 = Unpack<string[]>; // string

// 그냥 타입을 반환
type Test2 = Unpack<number>; // number

 

위 코드에서 Unpack 타입은 제네릭 타입 T를 인수로 받습니다.

 T가 배열 타입인지 확인하고, 배열이라면 요소 타입(U)을 추출합니다. 그렇지 않다면 T 자체를 반환합니다.

 

2. Function return Type 추출

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

// 함수 타입에서 반환 타입 추출
type Test3 = ReturnType<() => string>; // string

type Test4 = ReturnType<(x: number) => boolean>; // boolean

 

이 예제에서 ReturnType 타입은 함수 타입 T의 반환 타입 R을 추출합니다. T가 함수 타입이 아닌 경우, 기본적으로 any 타입을 반환합니다.

 

3. Promise 내부 Type 추출

type Awaited<T> = T extends Promise<infer U> ? U : T;

// 프로미스 타입에서 내부 타입 추출
type Test5 = Awaited<Promise<string>>; // string

type Test6 = Awaited<number>; // number

여기서는 Awaited 타입이 Promise 타입의 내부 값을 추출합니다.

T가 Promise 타입이라면 내부 타입 U를 반환하고, 그렇지 않다면 T를 그대로 반환합니다.

 

 

4. 외부 라이브러리에 types를 제공 안해주는 경우 (타입 추출 )

function getProfileO(person:{
    name:string;
    age:number;
    hobbies:[string, string];
}){
    return `${person.name}은 ${person.age}살이고 ${person.hobbies.join(" 와 ")}가 취미입니다.`
}

const me={
    name:"남광민",
    age:30,
    hobbies:["JS", "TS"],
}
// me.hobbies의 타입이 string[]으로 추론되어 타입 에러 발생
getProfile(me);

 

위 코드는 me.hobbies의 타입이 string[]으로 추론되어 타입 에러 발생합니다.

 

 

type GetFirstArgumentType<T> = T extends (arg: infer U, ...args:any) => any ? U : never;

const me:GetFirstArgumentType<typeof getProfile>={
    name:"남광민",
    age:30,
    hobbies:["JS", "TS"],
}

getProfile(me);

 

그냥 Person 타입을 새로 정의해 주는 방법도 있겠지만 서드파티 라이브러리의 코드를 다 파악해서 타입을 새로 정의하는 것은 쉽지 않습니다. 이런 경우 infer를 사용한 GetFirstArgumentType<T>와 같은 타입으로 쉽게 함수 인자 타입을 추론해 줄 수 있습니다.

 

마치며

infer 타입은 사실 TS를 하면서 자주 마주할 일은 없는 타입 입니다.
자주 사용한다면 오히려 뭔가 코드가 이상해지고 있다는 이야기일지도 모릅니다.
하지만 외부 함수를 사용할 때 함수의 인자나 리턴 타입 추론, 재귀적인 타입 추론 등 다른 타입에서 어떤 일부 타입을 뽑아서 사용해야 할 때 매우 유용하게 사용할 수 있습니다. 이런 활용법을 알아두면 나중에 유용하게 쓸 수 있을 것입니다.