错误 TS2503：找不到命名空间“WebMidi”答案

【问题标题】：error TS2503: Cannot find namespace 'WebMidi'错误 TS2503：找不到命名空间“WebMidi”
【发布时间】：2022-03-26 23:04:23
【问题描述】：

我有一个 Angular 工作区，其中包含一个库及其测试应用程序。

projects/
├── midi-app
│   ├── browserslist
│   ├── karma.conf.js
│   ├── src
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── tslint.json
├── midi-app-e2e
│   ├── protractor.conf.js
│   ├── src
│   └── tsconfig.e2e.json
└── midi-lib
    ├── karma.conf.js
    ├── ng-package.json
    ├── package.json
    ├── README.md
    ├── src
    ├── tsconfig.lib.json
    ├── tsconfig.spec.json
    └── tslint.json

我正在使用@types/webmidi 并且 VSCode 编辑器没有抱怨。

我也可以用ng build midi-lib --watch成功构建库，编译完成。

但是，当我尝试使用同一目录中的 ng serve 命令为应用程序提供服务时，它会失败并出现 error TS2503: Cannot find namespace 'WebMidi' 错误。

它曾经运行良好，直到昨天早上我打开笔记本电脑并尝试为应用程序提供服务时，它失败了。自从前一天正常运行以来，我没有进行任何代码更改。

我尝试清理，但没有任何改变：

rm -fr node_modules package-lock.json
npm cache clean
npm install

这里有一些配置文件。

tsconfig.json 文件：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "lib": [
      "es2018",
      "dom"
    ],
    "baseUrl": "./",
    "paths": {
      "@app/*": ["projects/midi-app/src/app/*"],
      "@lib/*": ["projects/midi-lib/src/lib/*"],
      "midi-lib": [
        "dist/midi-lib"
      ],
      "midi-lib/*": [
        "dist/midi-lib/*"
      ]
    }
  }
}

tsconfig-lib.json 文件：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true,
    "sourceMap": true,
    "inlineSources": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "typeRoots": [
      "../../node_modules/@types"
    ],
    "lib": [
      "dom",
      "es2018"
    ]
  },
  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableResourceInlining": true
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

我尝试添加

"typeRoots": [
  "node_modules/@types"
],

在tsconfig.json 文件中，但它根本没有帮助。

我也试过删除

"typeRoots": [
   "../../node_modules/@types"
],

来自 tsconfig-lib.json 文件，但它再次没有帮助。

更新：问题现在消失了，我不知道为什么。是因为我将 typescript 升级为 3.2.4 吗？还是因为我从 package.json 文件中删除了 webmidi 2.3.3 依赖项？高矮的...

【问题讨论】：

标签： javascript node.js angular typescript

【解决方案1】：

命名空间不是webmidi，这只是npm 包的名称。命名空间是WebMidi，所以我建议你在"compilerOptions" 中为tsconfig.json 和tsconfig.spec.ts（用于测试）添加类型。

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "allowSyntheticDefaultImports":true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "types": [ "WebMidi" ],
  }
}

【讨论】：

【解决方案2】：

试试看是否有效

在您的 tsconfig.app.json 中

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["webmidi"] // add here
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

【讨论】：

我试了一下，但错误仍然存在。我不惊讶。无需指定 webmidi 依赖项，因为它位于自动导入的 @types 目录下。实际上，指定types 数组只考虑列出的依赖关系，而忽略所有其他依赖关系。

【解决方案3】：

您应该对tsconfig.app.json 添加更改而不是tsconfig.json，因为此文件用于构建。例如，我的文件如下所示：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

如果您删除 types 字段或在其中添加所需类型（如 types: ["webmidi"]），它将起作用。

对我有用，我肯定对你有用

【讨论】：