错误 TS2430：接口“WebGLRenderingContext”错误地扩展了接口“WebGLRenderingContextBase”

Question

当我运行tsc 时，它给了我这个错误输出：

../../../AppData/Roaming/npm/node_modules/typescript/lib/lib.dom.d.ts(15340,11): error TS2430: Interface 'WebGLRenderingContext' incorrectly extends interface 'WebGLRenderingContextBase'.
  Types of property 'getExtension' are incompatible.
    Type '{ (name: "ANGLE_instanced_arrays"): ANGLEInstancedArrays; (name: "EXT_blend_minmax"): EXTBlendMinMax; (name: "EXT_color_buffer_half_float"): EXTColorBufferHalfFloat; (name: "EXT_frag_depth"): EXTFragDepth; (name: "EXT_sRGB"): EXTsRGB; (name: "EXT_shader_texture_lod"): EXTShaderTextureLOD; (name: "EXT_texture_filter_...' is not assignable to type '{ (extensionName: "EXT_blend_minmax"): EXT_blend_minmax | null; (extensionName: "EXT_texture_filter_anisotropic"): EXT_texture_filter_anisotropic | null; (extensionName: "EXT_frag_depth"): EXT_frag_depth | null; (extensionName: "EXT_shader_texture_lod"): EXT_shader_texture_lod | null; (extensionName: "EXT_sRGB"): EX...'.
      Types of parameters 'name' and 'extensionName' are incompatible.
        Type '"OES_vertex_array_object"' is not assignable to type '"ANGLE_instanced_arrays"'.

我的tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "rootDir": "src",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": true
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

tsc 是版本Version 3.1.3。

这是我的package.json：

{
  "name": "pupp-tf-test",
  "version": "0.0.1",
  "description": "Try to get environment set up to program using TypeScript, Puppeteer, and TensorFlow.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "xiaodeaux",
  "license": "ISC",
  "dependencies": {
    "@tensorflow/tfjs-node-gpu": "^0.1.18"
  },
  "devDependencies": {
    "@types/node": "^10.12.0"
  }
}

我唯一拥有的.ts 文件是空的。所以这与文件中的代码无关，因为没有。至少我认为它与该特定文件无关。

另外，我在 Windows 10 上并使用 Visual Studio Code。下面是 vscode 环境信息：

Version: 1.28.1 (user setup)
Commit: 3368db6750222d319c851f6d90eb619d886e08f5
Date: 2018-10-11T18:13:53.910Z
Electron: 2.0.9
Chrome: 61.0.3163.100
Node.js: 8.9.3
V8: 6.1.534.41
Architecture: x64

Answer 1

根据tfjs issue: Compile error with @tensorflow/tfjs-backend-webgl 上的@tafsiri，问题是：“由现在内置的 webgl 类型和我们当前使用的 @types/webgl2 包之间的冲突引起” em>。

他给出了下一个解决方案（对我有用）：

• 编辑您的文件tsconfig.json 并添加选项skipLibCheck

  {
    "compilerOptions": {
      ...
      // skip error: Interface 'WebGL2RenderingContext' incorrectly extends interface 'WebGL2RenderingContextBase'.
      // https://github.com/tensorflow/tfjs/issues/4201
      "skipLibCheck": true
    },
    ...
  }
  

Answer 2

看起来@types/webgl-ext 包（@tensorflow/tfjs-node-gpu 的间接依赖项）包含WebGLRenderingContext 的getExtension 方法的声明，该声明与WebGLRenderingContextBase 的getExtension 方法的声明不兼容TypeScript 标准库的最新版本。我不确定应该怎么做，所以我建议你先file an issue 反对@types/webgl-ext。如果你在那里没有得到答案，那么你可以升级到 TensorFlow.js 支持资源，询问是否可以删除对损坏且明显未维护的包的依赖。

与此同时，一种可行的解决方法是创建您自己的空的@types/webgl-ext 包的虚拟版本。在您的项目中创建一个目录来保存虚拟包（例如，假设您将目录命名为webgl-ext），从真实的@types/webgl-ext 包中复制package.json，创建一个空的index.d.ts 文件，然后注册使用相对路径在您的主 package.json 中的虚拟包：

  "dependencies": {
    "@tensorflow/tfjs-node-gpu": "^0.1.18",
    "@types/webgl-ext": "./webgl-ext"
  },