Vite+React+TypeScript项目中如何配置全局React类型以避免每个.tsx文件都导入React

兄弟我太懂你这种每个.tsx文件都要重复写import React, { JSX } from 'react'的烦躁了！在Vite+React+TypeScript的项目里，只要简单调整下tsconfig.json的配置，就能搞定全局React类型的自动识别，再也不用做这种重复劳动啦，具体操作如下：

• 打开项目根目录下的tsconfig.json文件，找到compilerOptions配置段
• 在compilerOptions里添加或修改两个关键配置：
  1. 将jsx属性设置为react-jsx：这是React 17+支持的自动JSX转换模式，开启后TypeScript会自动处理JSX语法，不需要手动导入React
  2. 在types数组中加入react：让TypeScript全局识别React的所有类型（比如JSX.Element这类）

给你一个完整的tsconfig.json配置示例参考：

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx", // 启用自动JSX转换，无需手动导入React
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "types": ["react"] // 全局引入React类型
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

配置完之后，你就可以直接在.tsx文件里写JSX代码，不用每个文件都导入React和相关类型啦！

备注：内容来源于stack exchange，提问作者Fiddle Freak