tsconfig.json配置异常：无法对.tsx文件进行类型检查

问题背景 #

• 新建TypeScript项目，期望无需导入操作即可对.ts和.tsx文件进行类型检查
• .ts文件类型检查正常，但VS Code中.tsx文件出现类型检查问题
• 已尝试修改tsconfig.json的include配置，问题仍未解决

排查与解决步骤 #

1. 确认jsx编译配置 #

.tsx文件需要TypeScript启用JSX编译支持，检查tsconfig.json的compilerOptions：

{
  "compilerOptions": {
    "jsx": "react-jsx" // 根据项目类型选择：react/react-native/react-jsx/react-jsxdev
  }
}

未正确设置jsx选项会导致TypeScript无法识别.tsx文件中的JSX语法，进而引发类型检查错误。

2. 校验include/exclude路径配置 #

确保include覆盖所有.tsx文件，且未被exclude排除：

{
  "include": ["**/*.ts", "**/*.tsx"], // 匹配项目下所有ts/tsx文件，可根据实际结构调整
  "exclude": ["node_modules", "dist", "build"]
}

注意路径是否与项目文件结构匹配，比如若tsx文件集中在src/components目录，可明确写为src/components/**/*.tsx。

3. 统一VS Code与项目的TypeScript版本 #

VS Code默认可能使用内置的TypeScript版本，和项目本地依赖版本不一致会导致检查逻辑差异：

• 点击VS Code右下角的TypeScript版本号（如5.2.2）
• 选择「Use Workspace Version」，切换为项目本地安装的TypeScript版本

4. 重启TypeScript语言服务 #

有时服务缓存会引发异常，重启即可：

• 按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）
• 输入并执行TypeScript: Restart TS Server

5. 排查全局类型冲突 #

若项目中存在全局类型定义（如globals.d.ts）或第三方库的类型声明冲突，可能影响.tsx文件检查：

• 暂时移除可疑的@types/*依赖包，验证问题是否消失
• 检查全局类型文件中是否有与React/JSX相关的重复定义

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