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在tsconfig.json目录中创建test并添加：

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

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

Answer 2

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

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

export {}也是一种方便的方法，可以在不导入任何内容的情况下使文件成为模块。

Answer 3

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

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

Answer 4

让我们尝试检查隔离的模块。当我检查Google时，没有直接的上下文。

这基本上意味着您允许Typescript隔离编译模块。

但是它来自Typescript，并且与Typescript优先考虑模块而不是名称空间有关。

模块还依赖于模块加载器（例如 CommonJs / Require.js）或支持ES模块的运行时。模组提供更好的代码重用，更强的隔离和更好的工具支持捆绑。

Source 1

使用create-react-app打字稿项目，您应该已经安装了typescript和ts-jest（或者create-react-app应该根据是否弹出应用程序来处理依赖项）。

另外ts-jest对此也有一些信息：

默认情况下，ts-jest在以下情况下使用TypeScript编译器：项目（您的项目），具有完整的类型检查和功能。但这也可以用于分别编译每个文件，TypeScript称之为 “隔离模块”。这就是isolatedModules选项（默认为false）。

Source 2

使用export命令后，您将根据导出的内容创建模块。

如果您使用的是ts-jest，则可以添加这些设置而不影响其他模块，而create-react-app将不再包含这些模块。

"ts-jest": {
  "isolatedModules": false
}

然后检查ts-jest页面（第二来源）的专业知识和缺点。

Answer 5

如何做 .eslintignore 添加您需要从 eslint 忽略的文件夹，因此任何导入都不会修复该 --isolatedModules 错误你可以测试你的逻辑

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

5 个答案: