Typescript 4.5에서 판별자로 사용되는 템플릿 문자열 유형

Typescript 4.5가 방금 출시되었으며 저에게 눈에 띄는 기능 중 하나는 판별자로서의 템플릿 문자열 유형입니다. 이 기사에서는 기본적인 예제를 사용하여 이 새로운 기능을 탐색할 것입니다. 내 마지막article에서 우리는 구분된 공용체를 사용하여 좁히기 쉬운 더 나은 유형을 작성하는 방법을 다뤘습니다.

이것은 그것의 확장이지만 구체적인 리터럴 유형 대신 템플릿 리터럴 유형의 일부로 구체적이지 않은 리터럴 유형, 즉 문자열, 숫자 등을 사용할 수 있으며 Typescript는 이를 판별.

이 기능을 이해하기 위해 SuccessType 및 ErrorType 의 두 가지 유형을 생성하여 시작하겠습니다. 그것들은 컴퓨터 시스템에서 수행할 수 있는 다양한 작업(예: HTTP 요청, FTP 요청, IO 요청 등)에 대한 가능한 응답을 나타낼 것입니다. 따라서 HTTP 요청이 성공하면 SuccessType 데이터를 얻고 실패하면 ErrorType 데이터.

두 유형의 경우 각각에는 type 속성이 있으며, 이는 두 유형이 공용체, 즉 ResponseType 공용체에서 사용될 때 두 유형을 구별하는 데 사용할 수 있습니다. 그러나 구체적인 리터럴 유형을 사용하는 대신 템플릿 문자열 유형을 대신 사용합니다.

이는 결과 템플릿 리터럴 유형이 Success 또는 Error 즉 ${string}Success 및 ${string}Error 와 결합된 문자열이 될 수 있음을 의미합니다. 이것은 우리의 성공 유형이 httpSuccess , ftpSuccess 등과 같은 가능한 많은 작업을 커버할 수 있게 하며 ErrorType 에도 동일하게 적용됩니다.

type SuccessType = {
    type: `${string}Success`,
    data: Record<string, unknown>;
}

type ErrorType = {
    type: `${string}Error`,
    message: string;
}

type ResponseType = SuccessType | ErrorType;

function processHTTPResponse(response: ResponseType) {
    // function body here
}

이전 버전에서 Typescript는 아래와 같이 유형 필드를 기반으로 ResponseType 공용체의 유형을 좁힐 수 없습니다.



그러나 최신 버전(4.5 이상)부터 typescript는 아래와 같이 response의 유형을 SuccessType로 좁힐 수 있습니다.



상상할 수 있듯이 이것은 구체적이지 않은 리터럴 유형을 제공함으로써 새로운 가능성의 세계를 열어줍니다. TypeScript는 구별하는 데 사용되는 필드가 비교되는 문자열에 포함되어 있는 한 두 공용체를 구별할 수 있습니다. 다음은 또 다른 기본적인 예입니다.

type HttpOK = {
    status: `2${string}`;
    data: string;
}

type Http500 = {
    status: `5${number}`;
    message: string;
}

type Http300 = {
    status: `3${string}`;
    redirect: string;   
}

function processResponse(response: HttpOK | Http300 | Http500) {
    if(response.status === "200") {
        console.log(response.data);
    }

    if(response.status === "300") {
        console.log(response.redirect);
    }

    if(response.status === "500") {
        console.log(response.message);
    }
}

다음은 위 코드에 대한 링크Typescript Playground입니다.

결론

이 간단한 기사에서는 템플릿 문자열 유형을 판별자로 사용하기 위해 Typescript v4.5에 제공되는 새로운 기능을 살펴보았습니다. 이를 통해 정확한 문자열이 아닌 판별 속성에 대한 템플릿 패턴에 의존하여 보다 다양한 유형을 구축할 수 있습니다.