Currently diving into typescript and facing a puzzling situation. I am attempting to check if the browser supports webgl. The detection process involves creating a canvas object on the document and obtaining the context to determine if it is "webgl" or "experimental-webgl". If webgl is supported, it will return a WebGlRenderingContext object; otherwise, null can be observed here.
The code snippet in question:
const canvas: HTMLCanvasElement = document.createElement('canvas');
const gl : WebGL2RenderingContext | null = canvas.getContext('webgl',contextOptions) || canvas.getContext('experimental-webgl', contextOptions);
The issue arises from getContext returning a RenderingContext, which is a helper type, rather than the expected real type. As a result, my VS Code IDE is flagging an error because the "gl" variable does not match the specified WebGLRenderingContext type. Despite this, based on the parameters passed, it should either be WebGLRenderingContext or null—not RenderingContext. This is evident when I attempt to call functions like "getParameter" and getShaderPrecisionFormat on my gl variable, functions that belong to WebGLRenderingContext but are absent in RenderingContext.
Since I am relatively new to typescript, I suspect there may be some fundamental information that I am overlooking. I am uncertain how to reassure my IDE that, according to the canvas API documentation, it will indeed be a WebGLRenderingContext and not the RenderingContext it currently assumes.