Make Gatsby refuse to compile on TypeScript error

Question

In my CRA TypeScript projects, when I have a TS error in my code, TS prevents the dev server from compiling and instead displays the error in browser and console. I like this behaviour.

In my new Gatsby project, this doesn't happen. IDE tells me about the error, but gatsby develop runs the code regardless, just like it would with plain js. How can I configure it to behave like what I'm used to from CRA?

I use gatsby-plugin-typescript. This is my gatsby-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`,
  ],
}

this is my 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

Currently, to my knowledge, this can't be achieved with gatsby-plugin-typescript.

According to the Gatsby docs:

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

If you want to achieve the same behaviour as in CRA, you can use 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, which is excellent.