Mark Story氏とPriscila Oliveira氏は最近、Sentryのフロントエンドコードベース(1年間の作業で100,000行のコード)をTypeScriptに変換するときに学んだ教訓を共有した。この二人は、TypeScriptがJavaScriptを段階的に置き換え、新しいTypeScript言語機能がリリースされるにつれて型が継続的に改良され、複雑な型が段階的に構築される段階的な変換プロセスについて説明した。
Story氏とOliveira氏はブログ投稿で、Sentryのコードベースに型を追加する動機について詳しく説明した。
2019年には、許容範囲を超えるフロントエンドバグを出していました。これらのインシデントの根本的な原因を調べた後、これらのバグの多くは静的分析と型チェックによって防止できることが明らかになりました。
長所と短所について議論した後、既存のReactコードベースをTypeScriptに段階的に変換することが決定された。変換には、18か月以上にわたって12人のエンジニアが関与し、1100のJavaScriptファイルを変換し、約100,000行のコードを集約した。
TypeScriptを使用する利点には、静的型システムの使用に関連する利点がある。例えば、コンパイル時にエラーのカテゴリを検出する。また、インターフェースのドキュメントが正確で常に同期される。TypeScriptツールとエコシステムには他にも利点がある。それは、コードエディターの統合、広範なツール、大規模なコミュニティなどによる開発者エクスペリエンスの向上である。重要なこととしてTypeScriptは漸進的型付けをサポートしており、コードベース全体で型を段階的に採用できる。
一方、報告された規模のTypeScript変換作業には、多大な時間の投資と、影響を受けるチームを絶えずサポートすることが伴う。そして、動的型付け(JavaScript)コードと静的型付けコードの共存による余分な精神鍛錬がある。
Sentry氏は、フロントエンドチームからの適切なコミュニケーションと賛同を確実にする段階的な変換戦略を採用したと報告した。そして、新しいコードにTypeScriptを採用することを指示した。後者によって、変換するJavaScriptファイルの数が時間の経過とともに必然的に減少することを保証された。
Sentry氏は、コミュニケーション、賛同、教育リソースの提供に加えて、変換プロジェクトのリスクを限定するための措置も講じた。
私たちの最も物議を醸した決定は、コードベースが100%TypeScriptに変換されるまで、他の主要なリファクタリングを行わないことに同意することでした。これは、TypeScriptの変換が完了するまで、他のquality-of-lifeの改善(状態管理ライブラリのアップグレードやReactフックの導入など)を行わないことを意味しました。
興味深いことに、新しいTypeScriptリリースは、重大な変更のために追加の作業が必要になるかもしれません。それでも、それらが提供する新しい言語機能(オプショナルチェイニング、Null合体演算子、名前付きタプルなど)に採用された。
Sentry氏は、TypeScriptとReactの間の相互運用性の問題に直面していると報告した。TypeScriptは、Reactコンポーネントのデフォルトプロパティのタイプを正しく推測できない場合がある。これは、コンポーネントファクトリが一連のパラメータからReactコンポーネントを作成するパターンである高次コンポーネントと組み合わせて使用された場合に発生する場合がある。React.forwardRefはジェネリックスと互換性がない。そのため、チームはany
型に頼ることになった。後者の問題に対するいくつかの解決策が、Reactコミュニティのメンバーによって提案されている。
開発者にとって、Sentry氏のアプローチを、Airbnbがフォローするアプローチと比較するのは面白いかもしれない。Airbnbは昨年ts-migrate
をリリースしており、それはJavaScriptからTypeScriptへの移行をサポートするツールである。Airbnbのオールインアプローチと自動化への依存は、コードベースのサイズ(200万行を超えるJavaScriptコード)によって決まる可能性がある。Airbnbエンジニアリングチームは、1日で50,000行を超えるコードを含むプロジェクトの変換を報告した。一部のアノテーション(例:// @ts-expect-error
とany
)の手動修正は依然として必要な場合がある。
完全なブログ投稿は、Sentry氏のWebサイトで閲覧できる。開発者には、Sentry氏によるTypeScriptへの移行過程に関する詳細と図についての投稿を参照することをお勧めする。