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

Question

我正在使用 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

当使用“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”吗？

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

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

Answer 1

我在 vue2 项目中遇到了同样的问题，我所做的是

安装 ImageCapture 的 npm 包作为开发依赖项 https://www.npmjs.com/package/@types/w3c-image-capture

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

应该将其注册到您的 package.json 文件中

"devDependencies": {
    "@types/jest": "^24.0.19",

    "@types/w3c-image-capture": "^1.0.2",    
  
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-nightwatch": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^1.0.3",
    "chromedriver": "86",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-cli-plugin-i18n": "~1.0.1",
    "vue-template-compiler": "^2.6.11"
  }

然后我必须手动将“w3c-image-capture”添加到我的打字稿配置（tsconfig.json）文件中，你猜到了它的类型

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest",
      "webpack",
      "webpack-env",
      "w3c-image-capture"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

沃利亚，一切都很好

Answer 2

我不知道它是否适用于 Ionic，但我发现如果你在 tsconfig.app.json 的 types 属性中添加类型，它将被 Angular 识别：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [
      "../node_modules/@types/w3c-image-capture"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "**/tests/**/*.ts"
  ]
}