Gastby React not enforcing any typescript

Question

I am working on a pretty fresh project right now. It is gatsby react / typescript.

Although my IDE is identifying and displaying typescript errors, the code is compiling and running just without issue.

I really want to figure out why and fix this so that other developer are not able to push up code with what should be typescript errors. The compiler or transpiler is acting as if typescript doesnt exist, despite the files being .ts or .tsx.

Here is my tsconfig.json:

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

And here is a snippet from my gatsby-config.ts:

  plugins: [
    'gatsby-plugin-typescript',

I am receiving now errors in the terminal upon running, but I do get a handful of type warnings (though I would expect to get more considering the number of ts errors in the code). Here is an example of one:

Warning: Failed prop type: The prop `to` is marked as required in `P`, but its value is `undefined`.

Edit: I am running the script via yarn start which grabs from this script block of my package.json:

  "scripts": {
    "develop": "dotenv-updater && gatsby develop",
    "start": "dotenv-updater && gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "typecheck": "tsc --noEmit",
    "lint-staged": "lint-staged",
    "lint": "eslint 'src/**/*.{js,ts,tsx,jsx}'",
    "format": "prettier --write \"**/*.{js,jsx,tsx,ts,json,md}\"",
    "prepare": "cd .. && husky"
  },

Answer 1

Update the scripts in your package.json to run tsc before gatsby.

🗎 package.json

  "scripts": {
    "build": "tsc --noEmit && gatsby build",
    "develop": "tsc --noEmit && gatsby develop",
    "start": "tsc --noEmit && gatsby develop"
  }

Now if you run yarn start (or yarn build or yarn develop) the TypeScript compiler will process your code first. The --noEmit flag tells tsc to process the TypeScript files (checking for errors etc.) but not produce any JavaScript output. Then, after tsc has run, the required gatsby command will execute.

You'll probably want to add dotenv-updater before or after tsc in those commands too.