react配置ts
来源：2-7 【TypeScript配置】深挖TS编译流程
xryb
2022-05-08
老师请问我在原来的项目中配置了ts之后，为什么会报这个错
2回答
-
Joseph_Ho
9天前
原因是没有自动生成tsconfig.json，缺少对tsx的默认支持，改成
import App from './App.tsx';就不会报错了，最好还是手动新增一个tsconfig.json文件，如下所示，关键是"resolveExtensions": [".tsx", ".ts", ".jsx", ".js", ".json"],添加对tsx的支持
------------------------
{
"compilerOptions": {
/* 基础配置：指定 TS 编译目标和模块系统 */
"target": "ESNext", // 编译为最新 ES 语法（兼容现代浏览器/Node）
"module": "ESNext", // 模块系统使用 ES 模块（import/export）
"moduleResolution": "Bundler", // 适配打包工具（Vite/Webpack）的模块解析逻辑（关键！解决后缀省略问题）
"resolveExtensions": [".tsx", ".ts", ".jsx", ".js", ".json"], // 自动补全的文件后缀（优先 TSX/TS，避免和 JS 冲突）
"allowImportingTsExtensions": true, // 允许导入时显式写 .ts/.tsx 后缀（兼容你之前的写法）
/* React 专属配置 */
"jsx": "react-jsx", // 支持 React 17+ 的新 JSX 转换（无需手动导入 React）
"jsxImportSource": "react", // 指定 JSX 运行时来自 react（React 18 推荐）
/* 类型严格性：推荐开启，提前规避类型错误 */
"strict": true, // 开启所有严格类型检查（核心！必开）
"noImplicitAny": true, // 禁止隐式 any 类型（避免漏写类型）
"strictNullChecks": true, // 严格检查 null/undefined（避免空指针错误）
"strictFunctionTypes": true, // 严格检查函数参数/返回值类型
"strictPropertyInitialization": true, // 严格检查类属性初始化
/* 兼容性与优化配置 */
"esModuleInterop": true, // 兼容 CommonJS 模块（如导入 Node 模块时不报错）
"forceConsistentCasingInFileNames": true, // 强制文件名大小写一致（避免跨系统报错）
"skipLibCheck": true, // 跳过第三方库的类型检查（加速编译）
"forceEsModuleInterop": true, // 强制 ES 模块互操作（解决 CommonJS 导入警告）
/* 路径与输出配置 */
"baseUrl": "./src", // 基础路径（导入时可简化路径，如 import xxx from 'components/xxx'）
"paths": {
// 路径别名（可选，简化深层组件导入）
"@/*": ["*"], // 例如：import Button from '@/components/Button' 等价于 ./src/components/Button
"@/hooks/*": ["hooks/*"],
"@/utils/*": ["utils/*"]
},
"outDir": "./dist", // 编译后输出目录（打包工具会覆盖，仅 TS 单独编译时生效）
"rootDir": "./src", // 源码根目录（指定 TS 只编译 src 下的文件）
/* 其他优化 */
"sourceMap": true, // 生成源映射文件（调试时可映射到 TS 源码）
"noEmit": true, // 只做类型检查，不生成编译后的 JS 文件（由打包工具负责编译，提升开发效率）
"isolatedModules": true, // 确保每个文件都是独立模块（兼容 Vite/Webpack 等打包工具）
"allowJs": true, // 允许在 TS 项目中导入 JS 文件（兼容老代码）
"checkJs": false // 不检查 JS 文件的类型（如果需要检查可设为 true）
},
"include": [
"src/**/*" // 要进行类型检查的文件（src 下所有 .ts/.tsx/.js/.jsx 文件）
],
"exclude": [
"node_modules", // 排除 node_modules（不检查第三方库）
"dist", // 排除输出目录
"**/*.test.ts",
"**/*.test.tsx" // 可选：排除测试文件（如果测试文件有单独配置）
]
}
00 -
阿莱克斯刘
2022-05-10
你原来的项目是js对吧，在引入typescript以后还需要编译一下，翻译为js代码才能运行。
012024-01-03
相似问题