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

Question

I create a program like so:

const program: WebGLProgram = gl.createProgram();

Then eventually attempt to attach the shader to the program like so:

gl.attachShader(program, vertexShader);

This throws the following error:

Error: TypeError: Failed to execute 'attachShader' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLProgram'.

Upon observing the program, typeof program is equal to object , so the error makes sense.

If I try and do the following, which works if I change the program type to any since typeof program.program is equal to WebGLProgram :

gl.attachShader(program.program, vertexShader);

It will throw the following error:

Property 'program' does not exist on type 'WebGLProgram'.

What is the correct way to resolve this issue in Typescript? I would prefer not to write program.program with the any type.

Answer 1

The error is not thrown by the TypeScript compiler, it is thrown by the browser runtime. If strictNullChecks is enabled in the tsconfig.json compilerOptions , you'll see the return type of WebGLRenderingContext/createProgram is WebGLProgram | null WebGLProgram | null , then you must first check that program is not 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 Playground