ご存知のようにTypeScriptでは複数の方法で関数を定義できます。これまで機能、リーダビリティ、書きやすさなどの点からTypeScriptの関数記述方法について様々な意見が交わされ知見が共有されてきました。 この発表ではRust製SWCプラグインの開発経験をもとに、新たにTransformerの視点を加えTypeScriptの関数、特にReactコンポーネント作成時にその記述方法がどういった影響を持つのかを紹介します。 検証のため、複数の記述方法に対応した以下のプラグインを作成します。 ・ 関数(コンポーネント)名を変更する ・ コンポーネントのトップのHTML要素にdata-testid=”コンポーネント名”を追加する ・ img要素のsrc属性がsvgファイルの際に、alt属性を自動的に空文字列にする そしてこれらを実行・計測し得られた興味深い結果を元にどういった条件でどの記述方法にアドバンテージがあるのかを考察します。 最後に結果・考察を元にコードのTransformerレベルでの最適化手法を共有し、ベストプラクティスについて一味違った視点から提案を投げかけます。 この発表が、TypeScriptコミュニティ拡大の一助となれば幸いです。