hiko1129's note

GatsbyJSでTypeScriptを使う方法

2019/08/18

依存ライブラリを入れる

$ npm i gatsby-plugin-typescript
$ npm i -D typescript @types/react @types/react-dom @types/node ts-node

gatsby-node.jsの中もTypeScriptにしたいのでts-nodeを含めています。

gatsby-config.jsにプラグインを追記する

module.exports = {
  plugins: [`gatsby-plugin-typescript`]
}

tsconfig.jsonを追加する

{
  "compilerOptions": {
    "esModuleInterop": true,
    "jsx": "preserve",
    "lib": [
      "dom",
      "esnext"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noImplicitReturns": true,
    "noUnusedParameters": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "target": "esnext",
    "allowJs": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "./src/**/*",
    "./gatsby/**/*"
  ]
}

gatsby/以下にはgatsby-node.js等の中身をおいていくのでincludeに含めています。

gatsby-config.js内でts-nodeを登録する

gatsby-config.js

require("ts-node").register();

gatsby-node.jsの中身をtsにする

gatsby-node.js

const { createPages, onCreateNode } = require('./gatsby/node/').default

module.exports = {
  createPages,
  onCreateNode
}

gatsby/node/index.ts

import createPages from './createPages'
import onCreateNode from './onCreateNode'

export default {
  createPages,
  onCreateNode
}

参考サイト等


hiko1129

hiko1129
Twitter GitHub Qiita Qrunch Blog