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.

HTMLCanvasElement.getContext() のオーバーロードから始め、報告にあるコードを使って TypeScript Playground で問題を再現します。オブジェクト変数ではなぜユニオンが生成される一方でインライン属性は機能するのかを追跡し、その後、2D オーバーロードを壊さずに gl2 が WebGLRenderingContext として推論されることを確認します。