typescript - 为什么在这种情况下界面合并不起作用？

Question

我正在 Visual Studio Code 中编写一些 WebGL 代码(带有来自 npm 包@types/webgl2 的类型声明)并且 typescript 似乎没有合并以下接口(interface)。

interface WebGL2RenderingContext {
    myExtension(): void
}

const gl: WebGL2RenderingContext = canvasElem.getContext("webgl2")
gl.myExtension() //getting a TS error saying 'myExtension' does not exist on type WebGL2RenderingContext

谁能解释为什么这不起作用？

编辑: 所以我可能应该包含 extends WebGLRenderingContext，因为这是 WebGL2RenderingContext 接口(interface)的定义方式。但是，它仍然没有像我预期的那样工作。

interface WebGL2RenderingContext extends WebGLRenderingContext {
    myExtension(): void
}

const gl: WebGL2RenderingContext = canvasElem.getContext("webgl2")
gl.myExtension() //works
gl.createTexture() //works
gl.createVertexArray() //getting a TS error saying 'createVertexArray' does not exist on type WebGL2RenderingContext

//note: createTexture is present in WebGLRenderingContext while createVertexArray is only present in WebGL2RenderingContext

Answer 1

我在页面底部找到了答案here (感谢 jcalz)它谈到了“全局增强”。

declare global {
    interface WebGL2RenderingContext extends WebGLRenderingContext {
        myExtensionMethod(): void
    }
}

WebGL2RenderingContext.prototype.myExtensionMethod = function() {
    // todo: implement myExtensionMethod
}

export default {} //makes this a module