TypeScriptのパフォーマンス改善

TypeScriptのパフォーマンス改善 2024/05/11 @TSKaigi-トラック2-LT 🗣️やじはむ

自己紹介やじはむ / yajihum ・株式会社SasaeLのフロントエンドエンジニア　・5月からCOMPASSに在籍しながら出向中　・公教育で使われる先生向けの校務支援プロダクトを開発中　・フロントエンドエンジニア募集中です！ ✊ ・エンジニア3年目
・X,GitHub: @yajihum

TypeScriptの公式リポジトリに PerformanceについてのWikiがある

今日話すこと 1. TypeScriptのパフォーマンスとは何か、　そしてなぜそれが重要なのか 2. コンパイル速度を改善するための具体的な手法とその背後にある理論

TypeScriptのパフォーマンスとは何か 1. コンパイル速度 TypeScriptからJavaScriptへの変換速度のことコンパイル速度を上げることで、tscによる型チェックや単純なビルド、テストの実行時間などを削減できる

例えばこの記事では参照：https://zenn.dev/knowledgework/articles/speedup-typecheck

記事から引用：改善前の TypeScript ファイルは自動生成されたコードを含めると約 29 万行あり、 tsc の実行に 50
秒ほどかかっていました

TypeScriptのパフォーマンスとは何か 2. 編集体験 VSCodeなどのIDEやテキストエディタで使用されている tsserverによる型チェックやエラー表示、コード補完などのフィードバックを得る体験のこと

例えばこの記事では参照：https://zenn.dev/knowledgework/articles/speedup-typecheck

記事から引用：ある日、新たに関数の実装を追加しようとしたその時、 tsserver（TypeScript の language server）による補完候補がなかなか表示されないことに気づいたのです。

つまり、TypeScriptのパフォーマンス改善をすることで開発体験や開発効率を上げることができる

パフォーマンスを改善する方法はいくつかあるが、今回は「コンパイルしやすいコード」にするための方法を見ていく

今日話すこと 1. TypeScriptのパフォーマンスとは何か、　そしてなぜそれが重要なのか 2. コンパイル速度を改善するための具体的な手法とその背後にある理論

1. 型宣言にはtypeよりもinterfaceを使う参照：https://github.com/microsoft/TypeScript/wiki/Performance#preferring-interfaces-over-intersections

「複数のオブジェクト型の合成に関してはインタフェースを使うといい」ということが明記されているインターフェース(interface)の場合型エイリアス(type)の場合 &を使って交差型(type aliases to intersections)を作る

なぜか？インターフェース：交差型： 1. 同じプロパティがあった場合はそれを検出し、単一のフラットなオブジェクトを生成する(プロパティのオーバーライド) →無効な型があった場合はエラーを発生させる 2. エラーの可能性が排除されたフラットな
オブジェクトのプロパティに対してのみ型チェックが行われる 3. 型関係がキャッシュされる 1. ただ各プロパティを再帰的にマージするだけで、 never型が生成されることもある 2. マージ結果がnever型などの無効な型であってもエラーは発生せず、型チェックは続行される 3. 型関係がキャッシュされない

補足：Linterを使った制御 typescript-eslintでは「consistent-type-definitions」という interfaceかtypeに強制するルールがあったりする

2. 型注釈を使用する型注釈をつけることで型推論によって行われる匿名型の解釈よりも宣言ファイルの読み書きにかかる時間を減らすことができる型注釈とは以下の「:number」ようなもの

型注釈なし例を見てみる npm run tsc importが挿入されている

コンパイルの流れ 1. 参照したい型が現在のスコープ内で直接アクセス可能かどうかを確認 (同じファイル内で定義された型やインポートされた型など) 2. アクセス可能でない場合、他のモジュールからインポートできるかどうかを確認する 3. インポートできる場合、該当のファイルをインポートするための最も適切なパスを計算する 4.
型参照を表現するための新しいノード(ASTの一部)を生成する。これは型注釈としてのその型を使用するためのコードとなる 5. 生成された型参照ノードを出力して生成されたコード(型注釈)を実際のTypeScriptファイルに書き出す

型注釈をつけた場合コンパイル前から参照先がわかっている型注釈がない場合のインポート先を探す一連の流れが省かれる 💡

ただし... 型推論はとても便利な機能なので全てのコードに対して明示的に型注釈を付ける必要はないコードに遅い部分があった場合は型注釈をつけることを試してみるでOK

補足：Linterを使った制御 typescript-eslintでは「explicit-function-return-type」という関数とクラスメソッドに明示的な戻り値の追加を強制するルールがあったりする

3. 複雑な型は名前付けをする例えば以下のような複数の条件分岐によって戻り値の型が定義されている関数を考える・関数fooが実行されるたびに戻り値の条件型を検証する必要がある・SomeType型の複数のインスタンスを比較する際にfooの戻り値の型構造を　再度検証する必要がある

別で名前付けをする型エイリアス(type)を使用して別でFooResult<U, T>型を定義一度型の検証が行われるとコンパイラはキャッシュし、もし同じ型が出現した際にはキャッシュを利用できる

まとめ・TypeScriptのパフォーマンスを向上させることで　開発体験や開発効率を上げることが出来る・コンパイル速度を改善する方法として以下がある　1. 型宣言にはtypeよりもinterfaceを使う 2. 型注釈を使用する 3. 複雑な型は名前付けをする

今回話した内容について書いた記事がブログにあります https://blog.yajihum.dev/blog/posts/tech/20240218_tips_for_speeding_up_typescript こちらの方がより詳しく書いてあるため良かったら参考にしてもらえると幸いです！

TypeScriptのパフォーマンス改善

TypeScriptのパフォーマンス改善

やじはむ

More Decks by やじはむ

Other Decks in Programming

Featured

Transcript