Frontend/TypeScript

TypeScript - infer

ej503 2023. 1. 14. 12:26

infer 키워드는 조건부 타입의 조건식이 참으로 평가될 때 사용하는 키워드이다.

예를 들어, Element<number> extends Element <infer U>와 같은 타입을 작성하면 U타입은 number 타입으로 추론된다. 즉, U가 추론 가능한 타입이면 참이고 아니라면 거짓인 것이다.

 

조건부 타입 절에서만큼은 굉장히 유용한 키워드이자 단골 구문이기에 정리를 해보고자 한다.

 

구조

 

T extends infer U ? X : Y

 

예시 1 

 

type Type<T> = T extends infer R ? R : null;

const a: Type<number> = 123;
console.log(typeof a); // number

 

이 때, infer 키워드의 명시가 의미있는가에 대해 의문을 가질 수 있을 것이다.

 

 

예시 2

 

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

function fn(num : number) {
  return num.toString(); 
}

const a : ReturnType<typeof fn> = "Hello";   // ReturnType<T> 
console.log(a); // Hello

 

 

여기서 핵심은 infer 키워드를 통해 유틸리티 타입으로 만들었다는 것이다. 즉, ReturnType은 infer 키워드를 통해 만들어졌다는 의미다.

 

이번 글에서는 "infer" 키워드에 대해 살펴보았다. 단어에서도 알 수 있듯이 타입의 추론을 가능하게 하며 컴파일 과정에서 타입을 미리 명시해주지 않아도 infer 을 통해 런타임 과정에서 타입을 제시해 컴파일러가 추론할 수 있도록 한다.