TypeScript 会看到未在 tsconfig 的“types”字段中声明的全局类型

Question

我有一个包含多个 tsconfig 文件的项目，因为我正在使用 Angular 构建电子应用程序，并且我希望电子代码有不同的配置，而角度代码有不同的配置。

\n

简化的项目结构：

\n

 Foobar //angular app root folder\n\xe2\x94\x9c\xe2\x94\x80\xc2\xa0app //electron app root folder\n\xe2\x94\x82\xc2\xa0\xc2\xa0\xe2\x94\x9c\xe2\x94\x80\xc2\xa0**/*.ts //multiple folders with .ts files\n\xe2\x94\x82\xc2\xa0\xc2\xa0\xe2\x94\x9c\xe2\x94\x80\xc2\xa0test\n\xe2\x94\x82\xc2\xa0\xc2\xa0\xe2\x94\x82\xc2\xa0\xc2\xa0\xe2\x94\x94\xe2\x94\x80\xc2\xa0test.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0\xe2\x94\x94\xe2\x94\x80\xc2\xa0tsconfig.json\n\xe2\x94\x9c\xe2\x94\x80\xc2\xa0src //angular code\n\xe2\x94\x9c\xe2\x94\x80\xc2\xa0node_modules\n\xe2\x94\x9c\xe2\x94\x80\xc2\xa0package.json\n\xe2\x94\x9c\xe2\x94\x80\xc2\xa0tsconfig.app.json\n\xe2\x94\x9c\xe2\x94\x80\xc2\xa0tsconfig.json\n\xe2\x94\x94\xe2\x94\x80\xc2\xa0tsconfig.spec.json\n

\n

\xc2\xa9 由项目树生成器生成

\n

我的问题

\n

Angular代码正在使用jasmine，但我想用它jest来测试electron代码。由于某种原因，我看不到jest内部的类型Foobar/app/test/test.ts，因为它们以某种方式被jasmine.

例如：

\n

expect(foobar1).toMatchObject(foobar2); //Property \'toMatchObject\' does not exist on type \'FunctionMatchers<any>\'\n//but I can see Jasmine types and methods\n

\n

但是当我改变时Foobar/app/tsconfig.json

：

\n

{\n  "compilerOptions": {\n    "target": "es2018",                               \n    "module": "commonjs",                           \n    "lib": ["es2018"],                            \n    "outDir": "./dist",                             \n    "strict": true,                               \n    "strictNullChecks": true,                   \n    "esModuleInterop": true,                       \n    "experimentalDecorators": true,              \n    "emitDecoratorMetadata": true,               \n    "skipLibCheck": true,                           \n    "forceConsistentCasingInFileNames": true,     \n  }\n}\n

\n

到：

\n

{\n  "compilerOptions": {\n    "target": "es2018",                               \n    "module": "commonjs",                           \n    "lib": ["es2018"],                            \n    "outDir": "./dist",                             \n    "strict": true,                               \n    "strictNullChecks": true,                   \n    "esModuleInterop": true,                       \n    "experimentalDecorators": true,              \n    "emitDecoratorMetadata": true,               \n    "skipLibCheck": true,                           \n    "forceConsistentCasingInFileNames": true,\n    "types": ["jest"] // <---- only this line has been added\n  }\n}\n

\n

这解决了上述toMatchObject错误（jest现在在test.ts文件中使用而不是jasmine），但由于 tsconfig 文档中编写的内容，我预计会丢失其他全局变量，但我仍然看到未包含在types数组中的全局类型。

例如（Foobar/test/test.ts）：

\n

 process.addListener("fail", "idk"); // <-- Argument of type \'"fail"\' is not assignable to parameter of type \'Signals\'.\n

\n

我预计会丢失node类型，因为我只jest在类型数组中指定，但在调用时我仍然收到自动完成提示和类型错误process（我没有导入process或node在这个文件中，只有一行）。为什么我仍然看到不在数组中的全局变量的类型错误types？tsconfig.json\n这里引用了ts 文档：

\n

\n

默认情况下，所有可见的 \xe2\x80\x9d@types\xe2\x80\x9d 包都包含在编译中。任何封闭文件夹的 node_modules/@types 中的包都被视为可见 [...] 如果指定了类型，则只有列出的包才会包含在全局范围中 [...]\n设置此选项时，通过不包含模块中的类型数组：

\n

\n
• 不会将全局变量添加到您的项目中（例如节点中的进程，或期望\nin Jest）
\n

\n

\n

自动生成的角度 tsconfigs

\n

foob​​ar/tsconfig.json

\n

{\n  "compileOnSave": false,\n  "compilerOptions": {\n    "baseUrl": "./",\n    "outDir": "./dist/out-tsc",\n    "forceConsistentCasingInFileNames": true,\n    "strict": true,\n    "noImplicitReturns": true,\n    "noFallthroughCasesInSwitch": true,\n    "sourceMap": true,\n    "declaration": false,\n    "downlevelIteration": true,\n    "experimentalDecorators": true,\n    "moduleResolution": "node",\n    "importHelpers": true,\n    "target": "es2017",\n    "module": "es2020",\n    "lib": ["es2018", "dom"],\n  },\n  "angularCompilerOptions": {\n    "enableI18nLegacyMessageIdFormat": false,\n    "strictInjectionParameters": true,\n    "strictInputAccessModifiers": true,\n    "strictTemplates": true,\n  }\n}\n

\n

Foobar/tsconfig.app.json：

\n

/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n  "extends": "./tsconfig.json",\n  "compilerOptions": {\n    "outDir": "./out-tsc/app",\n    "types": []\n  },\n  "files": [\n    "src/main.ts",\n    "src/polyfills.ts"\n  ],\n  "include": [\n    "src/**/*.d.ts"\n  ]\n}\n

\n

Foobar/tsconfig.spec.json：

\n

/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n  "extends": "./tsconfig.json",\n  "compilerOptions": {\n    "outDir": "./out-tsc/spec",\n    "types": [\n      "jasmine"\n    ]\n  },\n  "files": [\n    "src/test.ts",\n    "src/polyfills.ts"\n  ],\n  "include": [\n    "src/**/*.spec.ts",\n    "src/**/*.d.ts"\n  ]\n}\n

\n

依赖项和 devDependency：

\n

"dependencies": {\n    "@angular/animations": "~12.0.2",\n    "@angular/common": "~12.0.2",\n    "@angular/compiler": "~12.0.2",\n    "@angular/core": "~12.0.2",\n    "@angular/forms": "~12.0.2",\n    "@angular/platform-browser": "~12.0.2",\n    "@angular/platform-browser-dynamic": "~12.0.2",\n    "@angular/router": "~12.0.2",\n    "lodash": "^4.17.21",\n    "reflect-metadata": "^0.1.13",\n    "rxjs": "~6.6.0",\n    "sqlite": "^4.0.23",\n    "sqlite3": "^5.0.2",\n    "tslib": "^2.1.0",\n    "zone.js": "~0.11.4"\n  },\n  "devDependencies": {\n    "@angular-devkit/build-angular": "~12.0.2",\n    "@angular/cli": "~12.0.2",\n    "@angular/compiler-cli": "~12.0.2",\n    "@types/jasmine": "~3.6.0",\n    "@types/jest": "^26.0.24",\n    "@types/lodash": "^4.14.171",\n    "@types/node": "^12.11.1",\n    "@types/sqlite3": "^3.1.7",\n    "electron": "13.1.2",\n    "jasmine-core": "~3.7.0",\n    "jest": "^27.0.6",\n    "karma": "~6.3.0",\n    "karma-chrome-launcher": "~3.1.0",\n    "karma-coverage": "~2.0.3",\n    "karma-jasmine": "~4.0.0",\n    "karma-jasmine-html-reporter": "^1.5.0",\n    "typescript": "~4.2.3"\n  }\n

\n