WebGL-如何在Typescript中将程序参数正确传递给gl.attachShader？

Question

我创建一个像这样的程序：

const program: WebGLProgram = gl.createProgram();

然后最终尝试将着色器附加到程序，如下所示：

gl.attachShader(program, vertexShader);

这将引发以下错误：

错误：类型错误：无法在'WebGL2RenderingContext'上执行'attachShader'：参数1不是'WebGLProgram'类型。

在观察程序时，typeof program等于object，因此该错误是有意义的。

如果我尝试做以下，这工作，如果我改变程序类型的任何自typeof program.program等于WebGLProgram：

gl.attachShader(program.program, vertexShader);

它将引发以下错误：

类型“ WebGLProgram”上不存在属性“程序”。

解决打字稿中此问题的正确方法是什么？我宁愿不要program.program用任何类型写东西。

Answer 1

该错误不是由TypeScript编译器引发的，而是由浏览器运行时引发的。如果strictNullChecks在中启用了tsconfig.json compilerOptions，则您将看到WebGLRenderingContext / createProgram的返回类型 为WebGLProgram | null，那么您必须首先检查它program是否为null：

const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl");
if (gl) {
  const program = gl.createProgram();
  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  if (program && vertexShader) {
    gl.attachShader(program, vertexShader);
  } else {
    throw new Error("WebGL createProgram or createShader failed!");
  }
} else {
  throw new Error("WebGL seems not supported!");
}

TypeScript游乐场