Typescript 热重新加载会中断WebGL2RenderingContext

我有一个

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);
  }
}

当我开始键入

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.

我的项目中的每一次编辑都很好。有人对此错误有解释吗？

这是类型错误

问题在于您使用的系统认为是什么类型的画布。getContext只能返回

WebGLRenderingContext

或

CanvasRenderContext2D

而不是

WebGL2RenderingContext

构造函数，因此当您调用

GraphixContext

构造函数时，它认为

gl

是错误的类型

改变这个

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

这个

 const gl = <WebGL2RenderingContext>canvas.getContext("webgl2");

const gl=canvas.getContext（“webgl2”）；

或者修复您对

canvas.getContext

的定义，以便它可以返回

WebGL2RenderingContext

问题可能就在这方面

“webgl2”

 const gl = <WebGL2RenderingContext>canvas.getContext("webgl2");