[TS] (utility types) infer 타입 분석

 

출처 : https://github.com/ZeroCho/ts-all-in-one

GitHub - ZeroCho/ts-all-in-one

 

https://github.com/microsoft/TypeScript/blob/main/lib/lib.es5.d.ts

GitHub - microsoft/TypeScript: TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

 

 

* [lib.ex5.d.ts] Parameters, ReturnType | ConstructorParameters, InstanceType

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

//생성자 대상
type ConstructorParameters<T extends abstract new (...args: any) => any> = T extends abstract new (...args: infer P) => any ? P : never;
type InstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : any;

 

▶ 어떤 함수의 매개변수와 리턴값이 {number, string, boolean} 일 때 직접 하드코딩이 아닌 함수에서 가져올 수 있음(자동으로 읽어올 수 있음)

 

 

* Parameters | ReturnType

▶ 타입 혹은 리턴값도 배열처럼 접근 가능

function zip(x: number, y: string, z: boolean): {x: number, y: string, z: boolean} {
    return {x,y,z}
}

type Params = Parameters<typeof zip>
type Ret = ReturnType<typeof zip>

type First = Params[0] //number
type Second = Params[1] //string
type Third = Params[2] //boolean

type ReFirst = Ret["x"] //number
type ReSecond = Ret["y"] //string
type ReThird = Ret["z"] //boolean

 

 

* Parameters를 type P로 만들 경우 |  ReturnType을 type Re로 만들 경우

function zip(x: number, y: string, z: boolean): {x: number, y: string, z: boolean} {
    return {x,y,z}
}
//T = 함수(함수를 제한둠 = extends(...args: any)=> any)
//infer : 알아서 추론, 추론값이 있으면  P
type P<T extends(...args: any)=> any> = T extends (...args: infer P) => any ? P : never;

type Re<T extends(...args: any)=> any> = T extends (...args: any) => infer P ? P : never;

type Params = P<typeof zip>
type Ret = Re<typeof zip>
type First = Params[0] //number
type Second = Params[1] //string
type Third = Params[2] //boolean

type ReFirst = Ret["x"] //number
type ReSecond = Ret["y"] //string
type ReThird = Ret["z"] //boolean

 

 

* ConstructorParameters | InstanceType

▶ 클래스는 타입으로 바로 사용 가능

▶ 인스턴스 = new 붙여서 실제 객체로 만든 것 

 

[TS]

class A {
    a: string;
    b: number;
    c: boolean;
    constructor(a: string, b: number, c: boolean) {
            this.a = a;
            this.b = b;
            this.c = c;
    }
}
const c = new A('123', 456, true);
//type C = a: string, b: number, c: boolean
type C = ConstructorParameters<typeof A> //typeof 클래스가 생성자
//type I = A
type I = InstanceType<typeof A>

//클래스는 타입으로 바로 사용 가능

//인스턴스 = new 붙여서 실제 객체로 만든 것 
const a2 : A = new A('123', 456, true)

 

 

[TS → JS로 변환할 경우]

"use strict";
class A {
    constructor(a, b, c) {
        this.a = a;
        this.b = b;
        this.c = c;
    }
}
const c = new A('123', 456, true);
const a2 = new A('123', 456, true);