错误 TS2304：找不到名称“ImageCapture”且已安装 @types/w3c-image-capture

我正在使用 Ionic 4 和 Angular 7 开发 PWA。

我需要访问网络摄像头（如果存在），然后在画布中渲染。 在这个过程中我使用图像捕捉 (https://developer.mozilla.org/en-US/docs/Web/API/ImageCapture https://developer.mozilla.org/en-US/docs/Web/API/ImageCapture).

let constrains = 
{
        audio:false,
        video: 
        {
            frameRate: { ideal: 60, min: 30 },
            facingMode: { ideal: "user" },
            width:  { exact: 626 },
            height: { exact: 720 },
        }
}    

navigator.mediaDevices.getUserMedia(constrains).then(mediaStream => 
{
        this.Webcam.nativeElement.srcObject = mediaStream;

        this.Webcam.nativeElement.play();

        const track = mediaStream.getVideoTracks()[0];

        let ic:ImageCapture = new ImageCapture(track);

        return this.ImageCapture.getPhotoCapabilities();
});

我收到一个错误，因为 TypeScript 对 ImageCapture 一无所知，所以我安装了类型并将它们添加到我的 package.json 中：

npm install --save-dev @types/w3c-image-capture

当使用“ionicserve”或“ionicbuild--prod”构建应用程序时，我收到此错误：

src/app/pages/photoframe/photoframe-take/photoframe-take.page.ts(26,22) 中的错误：错误 TS2304：找不到名称“ImageCapture”。 src/app/pages/photoframe/photoframe-take/photoframe-take.page.ts(117,28)：错误TS2663：找不到名称“ImageCapture”。您是指实例成员“this.ImageCapture”吗？

如果我调试应用程序，图像捕获就有价值，所以这只是我的构建问题。

如何从我的构建中删除此错误？

我遇到了这个问题并注意到，感谢answer https://stackoverflow.com/a/57080843/7481720 from 乔斯林·让 https://stackoverflow.com/users/11798825/joscelyn-jean，那个我的tsconfig.app.json类型的一个属性是空数组。删除该条目解决了我的错误。据推测，该设置有效地阻止了 ts 编译器查看 typeRoots 中的条目tsconfig.json

My tsconfig.app.json收到错误时：

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

然后修复后：

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

My base tsconfig.json其中 typeRoots 设置为：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "resolveJsonModule": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "esNext",
      "dom"
    ],
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}