Zenn
✅

一般的にやるReact props型定義、typescriptのパーフォマンス悪化させてるよ

2024/03/22に公開
React
TypeScript
performance
tech

はじめに

以下はIDE(typescript server)とトランスパイルのパーフォマンスを悪化させる原因になります。

import React from "react";
 
type ButtonProps =
  React.HTMLAttributes<HTMLButtonElement> & {
    tsuikaProp: string;
  };  //❌遅い

どうしたらいい？

interface型を使う

import React from "react";
 
interface ButtonProps
  extends React.HTMLAttributes<HTMLButtonElement> {
  tsuikaProp: string;
}　//✅早い

なぜ？

type & typeと interface extends typeの型の結合方法の違いが原因です。
type & typeはインターセクション型に該当します。
インターセクション型は、１つ以上の型を結合して新しい型を作成します。この結合処理には、複数の型のプロパティやメソッドを結合するための処理が含まれます。interface extends typeは継承関係を使って型を定義するため、型の結合が比較的シンプルです。Typescriptコンパイラーに与える値が複雑ほど、型推論が大変のことですね。

参考

Discussion