[ TS ] TypeScript 5.4 새로운 기능 알아보기.

 

2024년 1월 24일 타입스크립트 5.4 베타 버전 발표가 있었다.

이 포스팅은 해당 블로그를 보고 공부하고자 파파고와 함께 번역하며 옮긴 글이다. (※오역 주의)

 

 

 

 

 

우선 TypeScript 5.4 beta 버전은 아래의 명령어를 통해 다운받을 수 있다고 한다.

npm install -D typescript@beta

 

 

---

 

 

TypeScript 5.4의 새로운 기능을 간략하게 소개하면 아래와 같다.

 

1. Preserved Narrowing in Clousures Following Last Assignments

   마지막 할당 후 클로져에서 범위가 좁아지도록 타입을 유지(보존)하다.

2. NoInfer Utility Type

   NoInfer 유틸리티 타입
3. Object.groupBy and Map.groupBy

    Object.gruopBy 와 Map.groupBy

4. Support for require() calls in --moduleResolution bundler and --module preserve

    --moduleResolution bundler 와 --module preserve에서 require() 호출 지원.

5. Checked Import Attributes and Assertions

    Import 의 attributes 및 assertions 확인

6. Quick Fix for Adding Missing Parameters

    누락된 매개변수 추가를 위한 빠른 수정.

7. Upcoming 5.5 Deprecations

    향후 5.5 버전을 위한 준비.

8. Breaking Changes

    변경점 뿌시기

 

 

 

 

이중에 가장 인상깊었던 1,2번에 대해 자세히 알아보려고 한다.

---

 

 

Preserved Narrowing in Closures Following Last Assignments

TypeScript는 일반적으로 수행할 수 있는 검사를 기반으로 변수에 대한 보다 구체적인 유형을 알아낼 수 있다. 이런 과정을 narrowing이라고 부른다.

function uppercaseStrings(x: string | number) {
    if (typeof x === "string") {
        // TypeScript knows 'x' is a 'string' here.
        return x.toUpperCase();
    }
}

 

위와같은 예시의 한 가지 공통적인 문제점은 이런 좁아진 유형이 함수의 클로져 내에서 항상 유지되지는 않는다는 것이다.

 

 

function getUrls(url: string | URL, names: string[]) {
    if (typeof url === "string") {
        url = new URL(url);
    }

    return names.map(name => {
        url.searchParams.set("name", name)
        //  ~~~~~~~~~~~~
        // error!
        // Property 'searchParams' does not exist on type 'string | URL'.

        return url.toString();
    });
}

여기서 TypeScript는 url이 다른 곳에서 변형되었기 때문에 실제로 우리의 콜백 함수에서 URL 객체라고 가정하는 것이 "안전"하지 않다고 판단했다. 그러나 이 경우에는 항상 url에 대한 할당 후에 화살표 함수가 생성되며 url에 대한 마지막 할당이기도 한다.

 

TypeScript 5.4는 이 이점을 활용하여 범위를 조금 더 현명하게 좁힌다. 매개변수와 let 변수가 비승강 함수에 사용되면, 타입 체커는 마지막 할당 지점을 찾을 것이다. 만약 발견되면, TypeScript는 포함 함수의 외부로부터 안전하게 범위를 좁힐 수 있다.

 

중첩된 함수의 어느 곳에나 변수가 할당되어 있으면 좁은 해석이 시작되지 않는다. 함수가 나중에 호출될지 확실히 알 수 있는 방법이 없기 때문이다.

function printValueLater(value: string | undefined) {
    if (value === undefined) {
        value = "missing!";
    }

    setTimeout(() => {
        // Modifying 'value', even in a way that shouldn't affect
        // its type, will invalidate type refinements in closures.
        value = value;
    }, 500);

    setTimeout(() => {
        console.log(value.toUpperCase());
        //          ~~~~~
        // error! 'value' is possibly 'undefined'.
    }, 1000);
}

이것은 많은 전형적인 JavaScript 코드를 표현하기 쉽게 만들 것이다. 깃허브에서 그 변화에 대해 더 많이 읽을 수 있다.

 

 

 

 

 

 

 

The NoInfer Utility Type

일반 함수를 호출할 때, TypeScript는 당신이 전달하는 모든 것에서 타입 인수를 추론할 수 있다.

function doSomething<T>(arg: T) {
    // ...
}


// We can explicitly say that 'T' should be 'string'.
doSomething<string>("hello!");

// We can also just let the type of 'T' get inferred.
doSomething("hello!");

그러나 한 가지 문제는 추론하는 "최상의" 타입이 무엇인지 항상 명확하지 않다는 것이다. 이로 인해 TypeScript가 유효한 호출을 거부하거나, 의심스러운 호출을 수락하거나, 버그를 발견했을 때 더 심각한 오류 메시지를 보고할 수 있다.

 

 

예를 들어 다음과 같이, defaultColor(선택적 매개변수)와 함께 colors(색상 이름)목록을 가져오는 CreateStreetLight 함수를 상상해 보자.

function createStreetLight<C extends string>(colors: C[], defaultColor?: C) {
    // ...
}

createStreetLight(["red", "yellow", "green"], "red");

원래 colors 배열(C[])에 없는 defaultColor를 전달하면 어떻게 될까? 이 기능에서 색상은 "진실의 근원(source of truth)"이 되어야 하고 defaultColor로 전달할 수 있는 내용을 설명한다.

 

// Oops! This undesirable, but is allowed!
createStreetLight(["red", "yellow", "green"], "blue");

이 호출에서 타입 인터페이스는 "파란색(blue)"이 "빨간색(red)" 또는 "노란색(yellow)" 또는 "녹색(green)"과 같이 타입의 타당성이 있다고 결정했다. 따라서 TypeScript는 호출을 거부하는 대신, C[] 타입을 "빨간색" | "노란색" | "녹색" | "파란색"으로 추론한다.

 

사람들이 현재 이 문제를 처리하는 한 가지 방법은 기존 유형 매개변수에 의해 경계지어지는 별도의 유형 매개변수를 추가하는 것이다.

function createStreetLight<C extends string, D extends C>(colors: C[], defaultColor?: D) {
}

createStreetLight(["red", "yellow", "green"], "blue");
//                                            ~~~~~~
// error!
// Argument of type '"blue"' is not assignable to parameter of type '"red" | "yellow" | "green" | undefined'.

이것은 효과가 있지만, createStreetLight의 다른 곳에서는 D가 사용되지 않을 것이기 때문에 약간 어색하다. 

 

이것이 TypeScript 5.4가 새로운 NoInfer 유틸리티 타입을 도입하는 이유이다. NoInfer<...>의 타입을 둘러싸면 TypeScript에 타입 추론을 위한 후보를 찾기 위해 내부 타입들을 파고들어 대조하지 말라는 신호를 준다.

 

NoInfer를 사용하여 CreateStreetLight를 다음과 같이 다시 작성할 수 있다:

function createStreetLight<C extends string>(colors: C[], defaultColor?: NoInfer<C>) {
    // ...
}

createStreetLight(["red", "yellow", "green"], "blue");
//                                            ~~~~~~
// error!
// Argument of type '"blue"' is not assignable to parameter of type '"red" | "yellow" | "green" | undefined'.

defaultColor을 타입 대상에서 제외하는 것은 "파란색"이 결코 인터페이스 후보로 끝나지 않는다는 것을 의미하며, 유형 검사자는 이를 거부할 수 있다.

 

 

 

 

---

 

🌸 출처 🌸

 

MS - typescript dev blog