为什么任何导入都会修复--isolatedModules错误？

Question

在一个create-react-app打字稿项目中，我尝试编写此代码只是为了快速测试一些内容：

// experiment.test.ts
it('experiment', () => {
  console.log('test');
});

但这给了我以下错误，下面是一个红色的波浪形it：

提供“ --isolatedModules”标志时，所有文件都必须是模块。

但是，如果我将文件更改为以下文件，那么一切似乎都很好（当然，除了未使用的导入外）：

// experiment.test.ts
import { Component} from 'react'; // literally anything, don't even have to use it

it('test', () => {
  console.log('test');
});

为什么？这是怎么回事 --isolatedModules实际上是什么意思？

Answer 1

Typescript将没有导入/导出的文件视为旧脚本文件。由于此类文件不是模块，因此它们的任何定义都已合并到全局名称空间中。isolatedModules禁止此类文件。

将任何导入或导出添加到文件都会使其成为一个模块，并且错误会消失。

这export {}也是将文件制作为模块而无需导入任何内容的便捷方法。

Answer 2

正确的方法是告诉 TypeScript 你想要什么。如果您不想在目录中isolatedModules创建并添加：tsconfig.jsontest

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "isolatedModules": false
  },
}

添加"isolatedModules": true到配置中，然后通过向export {}我添加空的味道不好的代码来欺骗 TypeScript 检查器。

Answer 3

如果您不想添加不必要的内容

export {}

无处不在，并且不想破坏其他文件的编译器选项。

如果您有单独的tests/目录，则可以扩展根目录tsconfig文件并在该tests/目录中创建一个新文件。

然后将其添加到其中：

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "isolatedModules": false
    },
}

这仅关闭isolatedModules测试文件的标志。重新启动代码编辑器以同步更改。

Answer 4

尽管您从“错误文件”中导出了内容，但仍然有错误？

1. Check if you don't export same name that you already export in another file （冲突）
2. After your fix try to stop and start your npm/yarn runner （我经历过它即使在页面重新加载后也无法自行恢复，尤其是当您在其他地方遇到另一个错误时）