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.

Inizia con gli overload di HTMLCanvasElement.getContext() e riproduci il problema in TypeScript Playground usando il codice riportato nella segnalazione. Analizza perché una variabile oggetto produca un'unione mentre gli attributi inline funzionano, quindi verifica che gl2 venga inferito come WebGLRenderingContext senza compromettere l'overload 2D.