Question

我有一个webpack/typescript/webgl2设置。我有一个代表WebGL2RenderingContext的类，如下所示：

import { isNullOrUndefined } from "util";

export class GraphixContext implements Context<WebGL2RenderingContext> {
  private gl: WebGL2RenderingContext;
  private canvas: HTMLCanvasElement;
  private constructor(
    context: WebGL2RenderingContext,
    canvas: HTMLCanvasElement
  ) {
    this.gl = context;
    this.canvas = canvas;
  }

  public getContext(): WebGL2RenderingContext {
    return this.gl;
  }
  public appendCanvas(id: string) {
    document.body.appendChild(this.canvas);
    this.canvas.id = id;
  }

  public static build(): GraphixContext {
    let canvas = document.createElement("canvas");
    const gl = canvas.getContext("webgl2");

    if (isNullOrUndefined(gl)) {
      throw new Error("WebGL could not be initialized");
    }
    return new GraphixContext(gl, canvas);
  }
}

我用命令

启动webpack-dev-server

`"scripts": {
    "build": "webpack ",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open"
  },`

当我开始输入GraphixContext.ts时，热重装被激活，并且webpack创建一个bundle.js。但是，只有在我编辑GraphixContext中的代码时，才会显示以下错误。

  TS2345: Argument of type 'WebGLRenderingContext | CanvasRenderingContext2D' is not assignable to parameter of type 'WebGL2RenderingContext'.
  Type 'WebGLRenderingContext' is missing the following properties from type 'WebGL2RenderingContext': READ_BUFFER, UNPACK_ROW_LENGTH, UNPACK_SKIP_ROWS, UNPACK_SKIP_PIXELS, and 347 more.

我项目中的其他所有编辑工作都很好。有人对此错误有解释吗？

Answer 1

这是类型错误。

问题在于您使用的是什么类型的系统，它认为canvas.getContext只能返回WebGLRenderingContext或CanvasRenderContext2D，而不能返回WebGL2RenderingContext，因此，当您调用{ {1}}构造函数，它认为GraphixContext是错误的类型。

更改此

gl

对此吗？

 const gl = canvas.getContext("webgl2");

或者修正您对const gl = <WebGL2RenderingContext>canvas.getContext("webgl2");的定义，以便它可以返回canvas.getContext

问题可能在此区域

https://github.com/Microsoft/TypeScript/blob/b7d7d5f7b39a5b9619c77590e5fe7f434ed68f1e/src/lib/dom.generated.d.ts#L5998

没有WebGL2RenderingContext的条目

热装中断WebGL2RenderingContext

1 个答案: