Gatsby.jsのTypeScript対応手順

手順

1. ts-node, typescript, gatsby-plugin-graphql-codegenをインストール

yarn add ts-node typescript gatsby-plugin-graphql-codegen

※ GatsbyでTypeScriptのサポートがデフォルトになったので、gatsby-plugin-typescriptは不要

2. gatsby-node.jsファイルを作成して以下を記述

gatsby-node.js

"use strict"

require("ts-node").register({
  compilerOptions: {
    module: "commonjs",
    target: "esnext",
  },
})

exports.createPages = require("./gatsby-node/index").createPages

3. tsconfig.jsonファイルを作成して以下を記述

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "esnext",
    "strict": true,
    "sourceMap": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "jsx": "react",
    "lib": ["dom", "esnext"]
  },
  "include": ["./types/**/*", "./gatsby-node/**/*", "./src/**/*"]
}

4. typesディレクトリを作成して、その配下にgraphql-types.d.tsファイルを作成

5. gatsby-config.jsに以下を記述

gatsby-config.js

plugins: [
  ...,
  {
    resolve: `gatsby-plugin-graphql-codegen`,
    options: {
      fileName: `types/graphql-types.d.ts`,
    },
  }
]

詳細

TypeScript

メリット

• コンパイルエラーによってJavaScriptではフォローできない、スクリプト実行前の未然検知を可能にする。
• IDEと組み合わせることで型補完やエラーを表示させ開発体験を向上させることができる。

gatsby-plugin-graphql-codegen

• srcディレクトリ内でimport { graphql } from "gatsby"しているファイルの query 定義から、型定義が自動生成されます。
• 自動生成した型定義はgatsby-config.jsのfileNameで指定したファイルに記述されます。

ディレクトリ構成

gatsby-node
  └── index.ts
src
  ├── components
  ├── pages
  ├── styles
  ├── templates
  └── utils
static
types
  └── graphql-types.d.ts
.gitignore
.prettierignore
.prettierrc
gatsby-config.js
gatsby-node.js
package.json
package-lock.json
tsconfig.json
yarn.lock

参考文献

GatsbyのTypeScript化関連の記事・Githubリポジトリ

• Gatsby.js を完全TypeScript化する
• GatsbyMicroCMSBlog

ts-node

• ts-node

tsconfig.json

• What is a tsconfig.json
• tsconfig.jsonの全オプションを理解する（随時追加中）

gatsby-plugin-graphql-codegen

• Gatsby Typescript Graphql Codegen