tsconfig编译属性isolatedModules的作用

December 17, 2023
测试
测试
测试
测试
3 分钟阅读

场景

当我们的 .ts 文件中没有 import or export

// 假设这是一个 a.ts 文件
const a = 1;

会出现如下报错

TS1208: 'd.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

如何解决

这时候我们在,这个文件加一个 export {} 即可解决

// 假设这是一个 a.ts 文件
const a = 1;

export {};

为什么会有这个报错

当我们的 tsconfig.json 中的 isolatedModules 设置为 true 时,如果某个 ts 文件中没有一个 import or export 时,ts 则认为这个模块不是一个 ES Module 模块,它被认为是一个全局文件,其中定义的变量函数都是全局可见的 (不建议使用,因为它会容易造成代码命名冲突,全局变量污染,比如 a.ts 中定义的变量在另一个文件 b.ts 可以直接读取),这个时候在文件中添加任意一个 import or export 都可以解决这个问题。

为什么要设置 isolatedModules 为 true

假设有如下两个 ts 文件,我们在 a.ts 中导出了 Test 接口,在 b.ts 中引入了 a.ts 中的 Test 接口, 然后又在 b.tsTest 给导出。

// a.ts
export interface Test {}
// b.ts
import { Test } from './a';

export { Test };

这会造成一个什么问题呢,如 Babelts 转义时,它会先将 ts 的类型给删除,但是当碰到 b.ts 文件时, Babel 并不能分析出 export { Test } 它到底导出的是一个类型还是一个实实在在的 js 方法或者变量,这时候 Babel 选择保留了 export。 但是 a.ts 文件在转换时可以很容易的判定它就导出了一个类型,在转换为 js 时,a.ts 中的内容将被清空,而 b.ts 中导出的 Test 实际上是从 a.ts 中引入的,这时候就会产生报错。

如何解决上述问题

ts 提供了 import type or export type,用来明确表示我引入/导出的是一个类型,而不是一个变量或者方法,使用 import type 引入的类型,将在转换为 js 时被删除掉

// b.ts
import { Test } from './a';

export type { Test };

继续阅读

更多来自我们博客的帖子

如何安装 BuddyPress
由 测试 December 17, 2023
经过差不多一年的开发,BuddyPress 这个基于 WordPress Mu 的 SNS 插件正式版终于发布了。BuddyPress...
阅读更多
Filter如何工作
由 测试 December 17, 2023
在 web.xml...
阅读更多
如何理解CGAffineTransform
由 测试 December 17, 2023
CGAffineTransform A structure for holding an affine transformation matrix. ...
阅读更多