HTMLCanvasElement.getContext() wrong typings when used with attributes.

TypeScript Version: 2.4.1
Code

declare const canvas: HTMLCanvasElement;

//correct typing
const gl1 = canvas.getContext('webgl', { preserveDrawingBuffer: true, depth: false });

// wrong typing for gl2
const attributes = { preserveDrawingBuffer: true, depth: false };
const gl2 = canvas.getContext('webgl', attributes);

// If we copy HTMLCanvasElement.getContext() signatures it works
function getContext2(contextId: '2d', contextAttributes?: Canvas2DContextAttributes): CanvasRenderingContext2D | null;
function getContext2(contextId: 'webgl' | 'experimental-webgl', contextAttributes?: WebGLContextAttributes): WebGLRenderingContext | null;
function getContext2(contextId: string, contextAttributes?: {}): CanvasRenderingContext2D | WebGLRenderingContext | null { 
    return null;
 }


// correct typing
const gl3 = getContext2('webgl', attributes);

You can copy/paste that code on the playground to see it live (couldn't share: 'Text buffer too large to share').

Expected behavior:

Typing of all gl var should be WebGLRenderingContext.

Actual behavior:

Typing for gl2 is Canvas2DContextAttributes | WebGLRenderingContext.
I wanted to try to resolve this by changing the typings but then I found out that if we copy the exact same signature it works as expected.
So the typing indeed seem correct, dunno what's going on.

Beginnen Sie mit den Überladungen von HTMLCanvasElement.getContext() und reproduzieren Sie das Problem im TypeScript Playground anhand des im Bericht enthaltenen Codes. Verfolgen Sie, warum eine Objektvariable eine Union erzeugt, während die Inline-Attribute funktionieren, und überprüfen Sie anschließend, dass gl2 als WebGLRenderingContext inferiert wird, ohne die 2D-Überladung zu beeinträchtigen.