React项目导入.ts或.tsx文件的正确配置方案咨询

1. 调整tsconfig配置 #

补充以下配置到你的tsconfig.json中，调整后完整示例如下：

{
  "compilerOptions": {
    "target": "es2016",
    "module": "esnext",
    "noImplicitAny": false, // 迁移阶段可临时改为false，降低类型校验严格度
    "esModuleInterop": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "strict": true, // 迁移阶段可临时改为false，后续全量迁移完成再开启
    "jsx": "react-jsx",
    "allowJs": true,
    "checkJs": false,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    // 新增后缀识别配置，解决无后缀导入的识别问题
    "moduleSuffixes": [".ts", ".tsx", ".js", ".jsx", ".json"]
  },
  "include": [
    "src/**/*" // 修改为通配格式，确保src下所有子目录的ts/tsx文件都被纳入校验
  ],
  "exclude": ["node_modules", "dist", "build"] // 显式排除不需要校验的目录
}

同时确认配置文件命名为tsconfig.json，放置在项目根目录，避免编辑器识别失败。

2. 检查文件规则与导入语法 #

• 包含JSX语法的文件必须使用.tsx后缀，不能写为.ts
• 导入路径大小写严格匹配，比如文件为UserCard.tsx时，导入写成import UserCard from './userCard'会触发报错
• 导出导入语法匹配：默认导出对应import xxx from '路径'，命名导出对应import { xxx } from '路径'，不要混用

3. 配套构建工具配置校验 #

如果使用webpack，需要在webpack配置中补充扩展名识别：

module.exports = {
  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js', '.json']
  }
}

如果使用babel，需要安装@babel/preset-typescript并在babel配置中添加预设：

{
  "presets": ["@babel/preset-typescript", "@babel/preset-react"]
}

4. 迁移过渡方案 #

不需要全量添加@ts-ignore注解，针对类型未补全的导入可以使用// @ts-expect-error注解，该注解在后续类型补全完成后，TypeScript会自动提示可以移除，比@ts-ignore更安全。

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