Gatsby.js的TypeScript支持步骤

操作步骤。(Caozuo buzhou)

安装ts-node、typescript和gatsby-plugin-graphql-codegen

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

由于Gatsby默认支持TypeScript，因此不再需要使用gatsby-plugin-typescript。

创建gatsby-node.js文件并写入以下内容

"use strict"

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

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

3. 创建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/**/*"]
}

创建一个名为types的文件夹，并在其中创建一个名为graphql-types.d.ts的文件。

5. 在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