Почему слияние интерфейсов не работает в этом случае?

Question

Я пишу некоторый код WebGL в коде Visual Studio (с объявлениями типов, поступающими из пакета npm @ types / webgl2), и, кажется, машинопись не объединяет следующий интерфейс.

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 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

Я нашел ответ внизу страницы здесь (спасибо jcalz), где говорится о «глобальном увеличении».

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

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

export default {} //makes this a module