见鬼,TSC 编译 TS 文件出现了‘React‘ refers to a UMD global, but the current file is a module. Consider adding

这个错误是 TypeScript 编译器提示的。

解决办法

在 tsconfig 文件中配置 jsx: react-jsx 即可

{
  "compilerOptions": {
	// ...
    "jsx": "react-jsx", // 编译后用 React.cloneElement 方法代替 jsx
  },
}

### 如何使用 `tsc` 编译根目录下的文件 当使用 TypeScript 的编译器命令 `tsc` 时,可以通过不同的方式来控制其行为。如果希望编译根目录下的特定文件或者通过配置文件实现更灵活的管理,则可以遵循以下方法。 #### 使用 `tsc` 直接编译单个文件 可以直接运行 `tsc` 并附加目标源码文件名作为参数。例如,在终端执行如下命令将会单独编译名为 `hello.ts` 的文件[^2]: ```bash tsc hello.ts ``` 需要注意的是,这种情况下即使当前工作目录中存在 `tsconfig.json` 文件,该文件中的设置会被忽略。 #### 利用 `tsconfig.json` 进行全局项目配置并启动批量编译 为了使整个项目按照预定义规则被处理而不是逐一手动指定待编译单元,推荐依赖于 `tsconfig.json` 来描述所需选项。一旦此 JSON 格式的配置文档位于工程起点处(即通常理解意义上的“根路径”),只要简单调用无参形式的 `tsc` 即可触发依据这些设定值而展开的操作流程[^4]: ```bash tsc ``` 此时,TypeScript 将读取本地存在的 `tsconfig.json` 中的信息,并据此决定哪些文件应该参与转换过程以及采用何种策略对待它们[^3]。 #### 关键字段解释——include 和 exclude 属性的作用 在构建自定义化的 `tsconfig.json` 文档过程中,“include”数组用于列举那些应当纳入考虑范围内的相对位置模式串;与此同时,“exclude”列表则用来排除某些特殊子集不让其进入实际操作队列之中[^5]: ```json { "compilerOptions": { ... }, "include": ["src/**/*"], "exclude": ["node_modules", "**/*.test.ts"] } ``` 上述例子表明只针对 “src” 文件夹内部及其嵌套层次结构里的所有 .ts/.tsx 结尾的内容生效,同时跳过任何匹配到测试用途脚本样式的条目还有第三方库资源部分。 另外值得注意的一点在于,默认状态下如果没有显式声明这两个属性的话,系统会默认把除了 node_modules 外的所有顶层同级目录都视作候选对象加以扫描。 #### 示例代码展示完整的 tsconfig 设置 下面给出一个较为全面的例子供参考学习之用: ```json { "compilerOptions": { "target": "ES6", "module": "commonjs", "strict": true, "esModuleInterop": true, "outDir": "./dist" }, "include": [ "*.ts", "modules/**/*.ts" ], "exclude":[ "tests/**/*.ts" ] } ``` 这里设置了几个重要的 compilerOption 参数如 target, module 等等,并指定了输出目录 outDir; 同时也明确了要包含哪些类型的文件 (*.tsmodules 下面所有的 .ts),以及明确指出不需要涉及 tests 文件夹里面的任意 .ts 文件[^1]^. ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值