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

在使用“离子服务”或“离子构建--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

我遇到了这个问题，由于answer中的Joscelyn Jean，我发现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 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"
  ]
}

Answer 3

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

将ImageCapture的npm软件包安装为dev依赖项 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"
  ]
}

和voilia，一切都很好

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

3 个答案: