在一个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,创建tsconfig。Json到你的测试目录,并添加:

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

添加“isolatedModules”:配置为true,然后通过添加空的export{}来欺骗TypeScript检查器,让我觉得代码很糟糕。

其他回答

以防你不想添加不必要的东西

export {}

到处都是,不想破坏其他文件的编译器选项。

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

然后加上这个:

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

这只会关闭测试文件的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页面(第二个来源)的利弊。

正确的方法是告诉TypeScript你想要什么。如果你不想要isolatedModules,创建tsconfig。Json到你的测试目录,并添加:

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

添加“isolatedModules”:配置为true,然后通过添加空的export{}来欺骗TypeScript检查器,让我觉得代码很糟糕。

解决问题,见文章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"
  ]
}