在一个create-react-app的typescript项目中，我试着写这个，只是为了快速测试一些东西:
// experiment.test.ts
it('experiment', () => {
console.log('test');
});
但它给了我以下错误，在它下面有一个红色的弯弯曲曲:
当提供了'——isolatedModules'标志时，所有文件都必须是模块。
然而，如果我将文件更改为如下所示，那么一切显然都很好(当然，除了未使用的导入):
// experiment.test.ts
import { Component} from 'react'; // literally anything, don't even have to use it
it('test', () => {
console.log('test');
});
为什么?这里发生了什么?——isolatedModules实际上意味着什么?
Typescript将没有导入/导出的文件视为遗留脚本文件。因为这样的文件不是模块，它们的任何定义都被合并到全局命名空间中。isolatedModules禁止这样的文件。
向文件添加任何导入或导出都可以使其成为模块，错误就会消失。
export{}也是一种不需要导入任何东西就能使文件成为模块的方便方法。
正确的方法是告诉TypeScript你想要什么。如果你不想要isolatedModules，创建tsconfig。Json到你的测试目录，并添加:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"isolatedModules": false
},
}
添加“isolatedModules”:配置为true，然后通过添加空的export{}来欺骗TypeScript检查器，让我觉得代码很糟糕。
让我们试着检查孤立的模块。当我检查谷歌时，它没有直接的上下文。
它基本上意味着你允许Typescript单独编译模块。
但它来自Typescript，与Typescript更喜欢模块而不是名称空间有关。
模块还依赖于模块加载器(例如 CommonJs/Require.js)或支持ES模块的运行时。模块 提供更好的代码重用、更强的隔离和更好的工具 支持捆绑。
源1
使用create-react-app typescript项目， 你应该已经安装了typescript和ts-jest(或者create-react-app应该根据你是否弹出应用程序来处理依赖关系)。
ts- joke也有一些关于它的信息:
默认情况下，ts-jest使用TypeScript编译器 项目(您的)，具有完整的类型检查和功能。但它也可以 用于单独编译每个文件，TypeScript称之为an “隔离模块”。这就是isolatedModules选项的作用 默认为false)。
源2
只要使用export命令，您就可以用导出的内容创建一个模块。
如果你正在使用ts-jest，你可以在不影响其他模块的情况下添加这些设置，这些模块将由create-react-app组成。
"ts-jest": {
"isolatedModules": false
}
并检查ts-jest页面(第二个来源)的利弊。
尽管你从“错误文件”中导出东西，仍然有错误?
检查您是否导出了已经在另一个文件中导出的相同名称(冲突) 在你修复后，尝试停止并启动你的npm/yarn runner(我经历过即使在硬重载页面后，特别是当你在其他地方有另一个错误时，它也不能恢复自己)
不如就这样吧 .eslintignore 在eslint中添加你需要忽略的文件夹，这样就不会出现错误——任何导入都可以修复isolatedModules错误 你可以测试你的逻辑
解决问题，见文章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"
]
}
以防你不想添加不必要的东西
export {}
到处都是，不想破坏其他文件的编译器选项。
如果您有一个单独的tests/目录，您可以扩展根目录tsconfig文件，并在tests/目录中创建一个新文件。
然后加上这个:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"isolatedModules": false
},
}
这只会关闭测试文件的isolatedModules标志。重新启动代码编辑器以同步更改。
在我的例子中添加export {};这还不够。
我在webpack.config.ts文件中遇到了这个错误。错误信息如下所示:
“webpack.config。ts'不能在'——isolatedModules'下编译，因为它被认为是一个全局脚本文件。添加导入、导出或空的“export{}”语句，使其成为模块。
当我添加export {};我得到了另一个错误:
SyntaxError:意外的令牌“导出” 编译函数(node:vm:352:18)…
我尝试更改tsconfig。Json模块选项:
{
"compilerOptions": {
"module": "EsNext",
"isolatedModules": true
},
to:
{
"compilerOptions": {
"module": "CommonJS",
"isolatedModules": true
},
因为webpack.config.ts有commonjs的语法，比如module。出口={}。不幸的是，它也没有起作用。我发现没有类型定义添加到项目中，所以我运行:
npm install --save-dev ts-node @types/node @types/webpack
一切都很好。由于export{};，该文件被识别为模块。
当然，使用export {};使文件成为模块只是一种变通方法，而不是解决方案。我可以
change webpack.config file extension to .js instead of .ts and stay with the commonJS module format change to import/export statements in ES modules format and use the .mjs file extension, because Node.js has stable support for ES modules since version 13.2.0 was introduced. Nevertheless, that would trigger other problems with changing commonJS syntax Can I use as es-modules for webpack config? leave .ts file extension, follow the webpack configuration guide for typescript and use ES modules link
我选择了第三个选项，不得不添加导入'webpack-dev-server';避免类型错误。我的配置改变如下:
export {};
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = (env) => {...}
:
import * as path from 'path';
import * as webpack from 'webpack';
import 'webpack-dev-server';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const config = (env: { [x: string]: any; }): webpack.Configuration => {...}
export default config;
