[Typescript] Advanced-Types & Utility-Types 정리

infer

• 타입변수를 참조하기 위해 사용
• 조건부 타입의 extends 절에서 infer 키워드 사용 가능

 

example

type First<T> = T extends [infer U, ...unknown[]] ? U : never;

type SomeTupleType = [string, number, boolean];
type FirstElementType = First<SomeTupleType>; // string

 

example: infer 키워드 여러개 사용

type Unpacked<T> =
    T extends (infer U)[] ? U :
    T extends (...args: any[]) => infer U ? U :
    T extends Promise<infer U> ? U :
    T;

type T0 = Unpacked<string>;  // string
type T1 = Unpacked<string[]>;  // string
type T2 = Unpacked<() => string>;  // string
type T3 = Unpacked<Promise<string>>;  // string
type T4 = Unpacked<Promise<string>[]>;  // Promise<string>
type T5 = Unpacked<Unpacked<Promise<string>[]>>;  // string

// 위의 예제를 응용하면
type UnpackedAxiosResponse<T> = 
    T extends (...args: any) => Promise<AxiosResponse<infer U>> ? U : T;

// Pet
type Response = 
    UnpackedAxiosResponse<(petId: number) => Promise<AxiosResponse<Pet, any>>>;

Parameters<T>

• 함수 타입 T의 매개변수 타입들의 튜플 타입 구성

/**
* Obtain the parameters of a function type in a tuple
*/
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

 

example

declare function f1(arg: { a: number, b: string }): void;

type T0 = Parameters<() => string>;  // []
type T1 = Parameters<(s: string) => void>;  // [string]
type T2 = Parameters<(<T>(arg: T) => T)>;  // [unknown]
type T3 = Parameters<typeof f1>;  // [{ a: number, b: string }]
type T4 = Parameters<any>;  // unknown[]
type T5 = Parameters<never>;  // never
type T6 = Parameters<string>;  // 오류
type T7 = Parameters<Function>;  // 오류

ReturnType<T>

• 함수 T의 반환 타입으로 구성된 타입

/**
* Obtain the return type of a function type
*/
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

 

example

declare function f1(): { a: number, b: string }
type T0 = ReturnType<() => string>;  // string
type T1 = ReturnType<(s: string) => void>;  // void
type T2 = ReturnType<<T>() => T>;  // {}
type T3 = ReturnType<<T extends U, U extends number[]>() => T>; // number[]
type T4 = ReturnType<typeof f1>;  // { a: number, b: string }
type T5 = ReturnType<any>;  // any
type T6 = ReturnType<never>;  // any
type T7 = ReturnType<string>;  // 오류
type T8 = ReturnType<Function>;  // 오류

typeof

*참고: javascript에는 이미 typeof 연산자가 정의되어 있음

console.log(typeof "Hello, world!"); // "string"​

 

• 변수 또는 속성의 유형을 참조하기 위해 사용 가능함

let s = "hello";
let n: typeof s; // let n: string;

참고

Typescript-유틸리티 타입
[TypeScript] Advanced Types(고급 타입)
Typeof Type Operator