让 Gatsby 拒绝编译 TypeScript 错误

Question

在我的 CRA TypeScript 项目中，当我的代码中出现 TS 错误时，TS 会阻止开发服务器编译，而是在浏览器和控制台中显示错误。我喜欢这种行为。

在我的新 Gatsby 项目中，这不会发生。 IDE 告诉我错误，但 gatsby develop 无论如何都会运行代码，就像使用普通 js 一样。我如何配置它才能像我在 CRA 中习惯的那样工作？

我用gatsby-plugin-typescript。这是我的盖茨比-config.js:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        start_url: `/`,
      },
    },
    {
      resolve: `gatsby-plugin-typescript`,
      options: {
        isTSX: true, // defaults to false
        allExtensions: true, // defaults to false
      },
    },
    `gatsby-plugin-emotion`,
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

这是我的 tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "downlevelIteration": true,
    "jsx": "react"
  },
  "include": [
    "src/**/*"
  ]
}

Answer 1

目前，据我所知，gatsby-plugin-typescript无法实现。

根据 Gatsby docs:

This plugin uses babel-plugin-transform-typescript to transpile TypeScript. It does not do type checking.

如果你想实现与 CRA 中相同的行为，你可以使用 gatsby-plugin-ts instead. Be advised that, unlike gatsby-plugin-typescript, it is "unofficial". I came across it by trawling through Gatsby starters until I found this one，这非常好。

让 Gatsby 拒绝编译 TypeScript 错误

Make Gatsby refuse to compile on TypeScript error

typescript

gatsby

tsconfig