TypeScript 5.1 업데이트

지난 5월 30일 TypeScript 5.1이 출시했습니다. 주요 변경사항은 Node.js 최소 지원 버전, JSX 타입 작동 변경, Getter, Setter 타입 불일치 허용, undefined 를 함수 리턴 타입으로 허용 등이 있습니다.

최소 지원 버전 변경

ES2020 스펙으로 업데이트됨에 따라, Node.js의 최소 지원 버전 또한 14.17로 올라가게 되었습니다. 구 버전에서 TypeScript 5.1을 사용할 시 npm, yarn에서는 엔진 버전 경고, tsserver에서는 nullish 키워드(??) 미지원 오류 등이 발생하게 됩니다.


npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { node: '>=14.17' },
npm WARN EBADENGINE   current: { node: 'v12.22.12', npm: '8.19.2' }
npm WARN EBADENGINE }

bash

npm 설치시 미지원 엔진 경고

함수 리턴 타입에 undefined 지원

사실 이 말만 봤을 때는 무슨 말이냐 하겠지만, 사실 지금까지의 TypeScript의 함수는 undefined만 리턴하게 될 때 void 혹은 any 라는 타입만 가능했습니다. 이제 함수의 리턴타입이 undefined 로 지정이 가능합니다.


// Before 5.1: A function whose declared type is neither 'void' nor 'any' must return a value.
// After 5.1: 오류 없음
function someFn(): undefined { }

typescript

함수 리턴타입 undefined 지원

Getter와 Setter의 타입이 달라도 됩니다

Getter와 Setter는 속성 접근에 매우 유용한 기능중 하나입니다. 5.1 이전 까지의 Getter와 Setter는 같은 타입을 강제로 했으나, 이제부터는 다른 타입이 허용됩니다. 이는 지금까지 문제되었던 DOM의 style 이라는 속성의 쓰기 타입을 해결하게 되었습니다.


interface CSSStyleRule {
    // ...

    /** Always reads as a `CSSStyleDeclaration` */
    get style(): CSSStyleDeclaration;

    /** Can only write a `string` here. */
    set style(newValue: string);

    // ...
}

typescript

개선된 DOM.style 속성 타입


declare const el: HTMLDivElement;

// Before 5.1: Cannot assign to 'style' because it is a read-only property.ts
// style 속성의 쓰기 타입을 별도 지정이 불가능하여, readonly 타입으로 되어있음.
el.style = 'background: red;';

// After 5.1: 위 CSSStyleRule의 구현대로 허용됨.
el.style = 'background: red;';

typescript

개선된 속성 타입 예제

JSX Element와 JSX 태그 타입은 별도로 구분됩니다

TypeScript의 JSX 문법은 JSX 네임스페이스의 Element라는 타입을 기반으로 작동됩니다. 하지만 사용되는 태그가 반환하거나 생성한 타입을 가져와 JSX.Element 와의 호환성을 확인하게 되는데 여기서 JSX.Element 보다 넓은 타입을 반환하거나 렌더링 하는 경우 사용할 수 없는 문제가 발생하게 됩니다. 구체적으로 React의 컴포넌트는 Promise 타입을 반환할 수 있는 기능을 제안 했지만, 이 문제 때문에 표현할 수 없었습니다. (Next.js의 App router 또한 이 문제를 갖고있습니다.)

이를 해결하기 위해 5.1부터는 JSX.Element 가 아닌 JSX.ElementType 을 조회하게 됩니다.


async function Page() { /* ... */ }

// 'Page' cannot be used as a JSX component.
//   Its return type 'Promise<Element>' is not a valid JSX element.
const element = <Page />

typescript

5.1 이전 async 컴포넌트 미지원

마무리

TypeScript의 모든 버전은 배포 계획을 갖고 진행됩니다. 현재 다음 버전인 5.2에 대한 배포 계획도 나와있으니 확인해보셔서 다음 업데이트엔 어떤 기능이 추가되는지도 확인하시면 좋을거같습니다. 😃