Matsuri-tech Frontend Weekly 2023-06-14

TypeScript 5.1

2023年6月1日にTypeScript 5.1がリリースされました。あまり話題になっていない気がしますが、面白い変更が入っているのでいくつか取り上げます。

https://devblogs.microsoft.com/typescript/announcing-typescript-5-1/

返り値がundefinedな関数で 暗黙的なreturnが許容されるように変更

次のようなコードが許容されるようになりました。

const f = (): undefined => {
  // no returns
};

返り値の型をvoidにすれば良いだけでは？とも思いますが、利用しているライブラリなどがundefinedの返り値を要求しているケースで記述が楽になります。

interface SuperComponentProps {
  customValues: (values: string[]) => undefined | string[];
  authUser: (user?: User) => undefined | string;
}

<SuperComponent
  customValues={(values: string[]) => {
    const result = extractSuperValues(values);
    if (Array.isArray(result)) {
      return result;
    }
    if (Object.hasOwn(result, "data")) {
      return result.data;
    }
    // ..
    // no returns
  }}
  authUser={user => {
    if (user?.info) {
      return user.name;
    }
    // no returns
  }}
/>;

JSXのカスタマイズ、非同期RSCのサポート

今までNext.jsのApp Routerなどで非同期なサーバーコンポーネントを記述すると、Promiseは有効なJSX要素ではないというエラーが出ていましたが、JSXの型をカスタマイズ出来るようになったため、これに対応できるようになりました。

既に@types/reactに変更が入っているため、バージョンを上げれば非同期RSCに対応できます。

RSC From Scratch

RSCを実装するチュートリアルがReact公式から公開されています。

https://github.com/reactwg/server-components/discussions/5

これはただRSCを作るというものではなく、JSXから始まり、コンポーネント、ルーティング、非同期コンポーネント、ナビゲーション、…と一から順に実装しながら、SSRとRSCの違いや、Reactの大まかな仕組みを学べるようになっています。やりましょう。