时间戳

首页 > 解决方案 > 错误 TS2304：找不到名称“ImageCapture”并且已安装 @types/w3c-image-capture

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

问题描述

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

如果存在，我需要访问网络摄像头，然后在画布中呈现。在这个过程中，我使用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

使用“ionic serve”或“ionic build --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”吗？

如果我调试 ImageCapture 具有价值的应用程序，那么这只是我构建问题。

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

标签： angulartypescripttypescript-typingsimage-capture

解决方案

我遇到了这个问题，并注意到，多亏了 Joscelyn Jean 的回答，我有一个空数组类型的属性。删除该条目解决了我的错误。大概该设置有效地阻止了 ts 编译器查看 typeRoots 中的条目tsconfig.app.jsontsconfig.json

我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"
  ]
}

我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
  }
}

推荐阅读