こんにちは、フロントエンドエンジニアの峯です。
今回、JavaScript × Gatsby.jsで開発されているWebページに、TypeScriptを導入する機会がありましたので、手順をまとめて記事にしました。
すでに開発済のGatsby.jsプロジェクトにTypeScriptを導入する際に、参考にしていただければと思います。
目次
プラグインの導入
まずは、TypeScriptでコードを書き換えていくために必要なプラグインを導入します。
yarn add @types/react typescript gatsby-plugin-typescript gatsby-plugin-typegen
参考記事
導入するプラグインについては、公式ドキュメントで詳細が説明されていますのでこちらをご覧ください。
TypeScript設定ファイルの作成
プラグインの導入が完了したら、tsconfig.jsonにTypeScriptの設定を記述していきます。
ファイルが存在しない場合は、以下のコマンドでファイルを作成して設定を記述しましょう。
touch tsconfig.json
今回の設定は、こちらに記載されている内容を参考に設定を行いました。
設定ファイルのエラー解消
この時点で、ビルドすると以下2件のエラーが発生しました。
Unknown compiler option 'allowJS'. Did you mean 'allowJs'
/node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
1つ目は、オプション名についてでしたので、allowJSをallowJsに変更しました。
2つ目は、ファイルの中でデフォルトインポートを行なっておりましたが、デフォルトインポートが有効ではないというエラーのようした。
上記を踏まえて以下の通りtsconfig.jsonを変更しました。
"compilerOptions": {
...
"allowJs": true,
"esModuleInterop": true
}
参考記事
CSSの型導入
今回、Sassで記述しており、CSS moduleを採用していたためコンポーネントファイルのSassインポート部分で以下の型エラーが表示されていました。
Cannot find module './Button.module.scss' or its corresponding type declarations.
.scssを拡張子にもつモジュールの型指定がないとの事だったので、モジュール宣言用の型定義ファイル（declarations.d.ts）を用意しました。
declare module '*.scss'
まとめ
ここまでで、Gatsby.jsに型導入準備が整いビルドも通るようになりました。
大事なのはここからで、ファイル一つ一つを.jsxは.tsxに書き換え、.jsは.tsに書き換えて型を導入していきます。
TypeScriptは、一つのファイルからでも型導入が可能なので、ここからはコツコツ型を定義していき型安全性を高めていきます。
既存プロジェクトのTypeScript導入はハードルに感じますが、ファイル一つから導入することが出来るのでまずは新規のコンポーネントから対応するなど、スコープを細かく切って対応していくことをお勧めします。