在一个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单独编译模块。
但它来自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页面(第二个来源)的利弊。
解决问题,见文章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"
]
}