Gatsby React项目TypeScript类型检查不生效，错误代码仍可编译运行求助

我正在开发全新的Gatsby React/TypeScript项目，IDE能识别并显示TypeScript错误，但代码仍可正常编译运行——编译器/转译器仿佛完全无视TypeScript的存在。我需要找出原因并修复，防止其他开发者提交带TypeScript错误的代码。

运行yarn start时终端仅出现少量类型警告（远少于实际存在的错误数量），示例警告：

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

当前配置 #

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"],
}

gatsby-config.ts 插件片段 #

plugins: [
  'gatsby-plugin-typescript',
]

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"
},

1. 核心原因：Gatsby的TypeScript处理逻辑 #

Gatsby默认用Babel转译TypeScript文件，Babel仅移除类型注解，不做类型检查——这就是为什么有TypeScript错误代码还能运行的原因。终端看到的警告是React PropTypes的检查，并非TypeScript类型校验结果。

2. 把类型检查整合到开发/构建流程 #

修改package.json的脚本，让TypeScript检查成为开发和构建的必经环节：

• 更新develop/start脚本，同时启动类型检查监听和Gatsby开发服务：

  "develop": "dotenv-updater && tsc --noEmit --watch & gatsby develop",
  "start": "dotenv-updater && tsc --noEmit --watch & gatsby develop"
  

  这样tsc会实时监控文件变化，一旦有TypeScript错误就会输出到终端。
• 更新build脚本，先执行类型检查，通过后再构建：

  "build": "tsc --noEmit && gatsby build"
  

  只要存在TypeScript错误，构建就会失败，从源头阻止错误代码上线。

3. 优化lint-staged拦截提交 #

你已经配置了husky和lint-staged，现在给它加上TypeScript检查规则，确保提交代码前自动校验：
在package.json中修改lint-staged配置（或创建.lintstagedrc.js文件）：

"lint-staged": {
  "src/**/*.{ts,tsx}": ["tsc --noEmit", "eslint"],
  "**/*.{js,jsx,tsx,ts,json,md}": ["prettier --write"]
}

这样每次提交代码时，会先对暂存的ts/tsx文件执行类型检查和ESLint校验，有错误就直接拦截提交。

4. 确认tsconfig配置有效性 #

当前tsconfig.json的strict: true已经开启（会启用所有严格类型检查规则），include也覆盖了所有需要检查的文件，这部分无需调整。如果后续新增文件路径，可以扩展include数组。

5. 可选：优化gatsby-plugin-typescript配置 #

如果需要更精细的TypeScript转译控制，可以修改插件选项：

plugins: [
  {
    resolve: 'gatsby-plugin-typescript',
    options: {
      isTSX: true,
      jsxPragma: 'React',
      allExtensions: true
    }
  }
]

注意：这个插件仅负责转译，类型检查仍依赖tsc。

内容的提问来源于stack exchange，提问作者wynx