错误 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

当使用“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 有价值的应用程序，那么这只是我构建问题。

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

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”添加到我的 typscript 配置 (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

我遇到了这个问题并注意到，感谢来自Joscelyn Jean 的answer，我的tsconfig.app.json 有一个空数组类型的属性。删除该条目解决了我的错误。据推测，该设置有效地阻止了 ts 编译器查看 tsconfig.json 中 typeRoots 中的条目

收到错误时我的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
  }
}

Answer 3

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

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