为啥任何导入都修复了 --isolatedModules 错误？

Posted 2023-03-13

【中文标题】为啥任何导入都修复了 --isolatedModules 错误？

【英文标题】：Why is --isolatedModules error fixed by any import?为什么任何导入都修复了 --isolatedModules 错误？

【发布时间】：2019-10-27 20:28:53

【问题描述】：

在一个 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 究竟是什么意思/做什么？

【问题讨论】：

如果您使用的是import 或export，那么该文件就是一个ES6 模块。您的***示例存在问题，因为 it 未在任何地方定义，在模块化架构中，您需要从某处导入 it

@apokryfos 这个链接应该可以帮助medium.com/bb-tutorials-and-thoughts/…

这似乎也是一个解决方案***.com/questions/60925133/…

【参考方案1】：

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

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

export 也是一种方便的方法，无需导入任何内容即可将文件变成模块。

【讨论】：

谢谢，这很简单，但是当您创建第一个测试时，您会被错误弄糊涂。

@JuanguiJordán 太容易错了。如果您不想要isolatedModules，只需将它们设置为false。

谢谢@WojciechBednarski，但你能详细说明你的答案吗？

@JuanguiJordán 好吧，这就像添加一些规则，然后通过添加@ts-ignore 忽略它。 export 只是一种不同的语法，绕过规则的方式，但原则上就是这样。

我认为 99% 的时间都遵循一般规则没有问题，但有时需要打破这些规则。不得不“打破规则”，只要规则通常是好的，它就会迫使我思考我在做什么，并考虑是否有更好的方法来解决问题。有时没有。就像在这种情况下，我只是制作一个测试文件来尝试一下。

【参考方案2】：

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

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

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

【讨论】：

正如在其他 cmets 中解释的那样，在这种特殊情况下，它不会被视为代码异味，这是必要的，因为没有其他方法可以从 isolutedModules 规则中部分排除某些文件

嗯，当我从 true 变为 false 时，我被告知回复：TypeError: Cannot assign to read only property'isolatedModules' of object '#

@JerryAsher 和这里的人一样，但它之前工作过，然后我恢复了一些代码并尝试运行它，这时我得到了完全相同的错误。

【参考方案3】：

让我们尝试检查孤立的模块。当我检查谷歌时，没有直接的上下文。

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

但它来自 Typescript，并且与 Typescript 更喜欢模块而不是命名空间有关。

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

Source 1

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

ts-jest 也有一些关于它的信息：

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

Source 2

一旦您使用export 命令，您就可以从正在导出的内容中创建一个模块。

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

"ts-jest": 
  "isolatedModules": false

并查看 ts-jest 页面（第二个来源）以了解赞成和反对的观点。

【讨论】：

在我的 jest.config.js 中执行此操作解决了它 -- ` 'ts-jest': tsconfig: isolatedModules: false ` 但是，如果我只是从另一个文件导入它也将其转换为模块，然后这不是必需的。

【参考方案4】：

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

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（我经历过即使在硬重新加载页面后它也无法自行恢复，尤其是当您在其他地方出现另一个错误时）

【参考方案5】：

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

【参考方案6】：

问题解决，见文章 https://blog.csdn.net/qingfeng812/article/details/120510673

  "compilerOptions": 
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "noEmit": true,
    "jsx": "react-jsx"
  ,
  "include": [
    "src"
  ]

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案7】：

那是因为你还没有导入要测试的函数。一旦你这样做，错误就会消失。接受的答案解释了原因。