NetlifyCMSと連携したGatsbyのプロジェクトにTypeScriptを使えるようにする

TypeScriptを導入してみた作業ログです。

手順は主にこれの通りやりました。

https://qiita.com/otanu/items/f8840e66fb5e0993086d

Gatsbyのプラグインをインストール

yarn add gatsby-plugin-typescript

gatsby-config.jsにgatsby-plugin-typescriptを追加します。

...
plugins: [
    `gatsby-plugin-typescript`,
...

tsconfig.jsonを追加

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "*": ["types/*"] },
    "module": "commonjs",
    "target": "esnext",
    "jsx": "preserve",
    "lib": ["dom", "es2015", "es2017"],
    "strict": true,
    "noEmit": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true
  },
  "include": ["./src/**/*"]
}

コンパイルエラー除去

起動してみるとコンパイルエラーがたくさん出たので、全て修正しました。

足りないパッケージをインストール。

npm i -D typescript @types/react @types/react-dom @types/react-helmet @types/lodash

コンポーネントに対して全て型を付けていきました。

ステートレスなコンポーネントの型の付け方は↓こちらの記事を参考にしました。

TypeScript & Stateless Component でchildrenプロパティを扱う

React.StatelessComponent<React.Props<{}>>とすれば良いみたい。 こんな感じで付けました。

...
const IndexPageTemplate: React.StatelessComponent<React.Props<{}>> = () => {
...

とりあえずこれでTypeScriptの導入はできました。

ここまでのソース revision 732975c