Typescript 5.1 Beta - React Server Component 타입 지원 수정

개요

타입스크립트는 React의 컴포넌트가 JSX.Element타입이나 null을 반환할 것을 전제로 했습니다. 그러나 React Server Component가 비동기 함수를 지원하기 시작하면서 Promise를 반환하자 타입스크립트의 지원이 망가졌습니다.

import * as React from "react";

async function Foo() {
    return <div></div>;
}

let element = <Foo />;
//             ~~~
// 'Foo' cannot be used as a JSX component.
//   Its return type 'Promise<Element>' is not a valid JSX element.

이제 5.1부터는 새로운 JSX.ElementType을 참조하여 문제를 해결합니다.

namespace JSX {
    export type ElementType =
        // All the valid lowercase tags
        keyof IntrinsicAttributes
        // Function components
        (props: any) => Element
        // Class components
        new (props: any) => ElementClass;

    export interface IntrinsictAttributes extends /*...*/ {}
    export type Element = /*...*/;
    export type ClassElement = /*...*/;
}

참조

• Announcing TypeScript 5.1 Beta
  
• TypeScript just unblocked React Server Components
  
• React and TypeScript Stopped Fighting???