Gatsby.js でTypeScriptの型検査をする

Gatsby.jsでTypeScriptを使うとなると、公式の gatsby-plugin-typescript が選択肢に上がるのですが、このプラグインは、babelによってTypeScriptをトランスパイルしているため型検査が効きません。

VSCodeやIntelliJなどのエディタで見れば型エラーはわかるのですが、やっぱり型検査をしたいですよね。

ということでGatsby.jsで型検査をするための設定例を書きます。

型検査の有効化

TypeScriptモジュールを追加して、tscコマンドで型検査だけそちらで行うようにするだけです。

1. TypeScriptの追加

tscコマンドを使うためにTypeScriptをdevDependencyに追加します。

yarn add -D typescript 

2. tsconfig.jsonの追加

TypeScriptの設定ファイルである tsconfig.json を作成します。
方針に合わせて適宜必要な設定を入れてください。

npx tsc --init

3. package.jsonの修正

あとはtscの実行をscriptsに追加するだけです。
type-check で型検査を実行します。 noEmit は型検査だけ実行してJSファイルの出力は行わないというオプションです。

  "scripts": {
    ...
    "build": "npm run type-check && gatsby build",
    "type-check": "tsc --noEmit",
  },

上の設定ではbuild前にtype-checkを実行するように設定していますが、git の pre commit に追加してcommit前に実行するようにしても良いと思います。

終わりに

以上、「GatsbyでTypeScriptの型検査をする」でした。
書いてみたら特段Gatsby.jsならではではなくBabelでTypeScriptをトランスパイルした経験がある方ならば当たり前のこととなってしまいました。。

ただ自分は最初 gatsby-plugin-typescript も型検査するものと勘違いしていて、詰まったのでまとめました。

もっとより良い方法あればコメントなどで教えて頂けると嬉しいです!!!!