フロントエンドエンジニアの指田です。今回はアソビューの既存ReactプロジェクトにTypeScriptを導入した内容についてお話します。はじめにBabelでコンパイルしている既存ReactプロジェクトにTypeScriptを導入した話です。本記事ではTypeScript等の説明は致しません。既存のビルド構成は変更しない。(@babel/preset-typescriptを利用。ts-loaderは使用しない)導入直後はコード変更もしない。完全にTypeScriptにするまでJavaScriptとTypeScriptは混在する。Styleを利用しているため、Typescriptのconfigも追加してます。最初の設定は悩みました。設定を厳しくしすぎると、開発が進まなくなるので必要そうな設定のみで導入しました。TypeScript初期はallowJs(JavaScriptもトランスパイルに含めるかどうか)は外して導入してます。},}ESLintoverridesを使用してJavaScriptもTypeScriptも同じ様にlintが効くようにしてます。scriptJavaScriptも含めたチェックできるtscコマンドも用意しました。},}型について導入直後はanyまたは未指定で進めました。引数の誤り、不要なPropsがなくなるのでコードがきれいになるメリットがあります。まとめ既存コードがある場合、初期の導入範囲はなるべく小さくすることをおすすめします。Babelを使用しているのであれば、@babel/preset-typescriptを利用する方が早めに導入できると思います。ESLint等の設定はoverridesを利用し、混在しても問題ないようにするのがいいと思います。最後にアソビューではTypeScriptを導入したプロジェクトはまだ少数なので全てのReactプロジェクトへ導入を検討して行きたいです。関連記事2019-12-13EKSでの機密情報の隠蔽にkubernetes-external-secretsを導入してみたアソビュー!SREチームの霧生です。2019の10日目です。