'Canvas#getContext' almost never returns 'null'

[cubedhuang]

TypeScript Version: 2.5.3

Code:

let canvas: HTMLCanvasElement = document.createElement("canvas");
let ctx: CanvasRenderingContext2D = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);

Expected behavior:
No errors should occur because the type of canvas is HTMLCanvasElement.

Actual behavior:

test.ts(2,5): error TS2322: Type 'CanvasRenderingContext2D | null' is not assignable to type 'CanvasRenderingContext2D'.
  Type 'null' is not assignable to type 'CanvasRenderingContext2D'.

If I change the type of ctx to CanvasRenderingContext2D | null, then I get

test.ts(3,1): error TS2531: Object is possibly 'null'.

[mhegazy]

From the spec: https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-getcontext

context = canvas . getContext(contextId [, ... ] )

Returns an object that exposes an API for drawing on the canvas. The first argument specifies the desired API, either "2d", "bitmaprenderer" or "webgl". Subsequent arguments are handled by that API.
This specification defines the "2d" and "bitmaprenderer" contexts below. There is also a specification that defines a "webgl" context. [WEBGL]
Returns null if the given context ID is not supported, or if the canvas has already been initialized with another context type (e.g. trying to get a "2d" context after getting a "webgl" context).

So the definition for getContext to return CanvasRenderingContext2D | null matches the spec. that said.. i have personally found that annoying as well.. it is possible we change the definition to remove the | null in violation of the spec, for convenience.

[weswigham]

For reference,

let canvas: HTMLCanvasElement = document.createElement("canvas");
let ctx: CanvasRenderingContext2D | null;
if (!(ctx = canvas.getContext("2d"))) {
    throw new Error(`2d context not supported or canvas already initialized`);
}
ctx.fillRect(0, 0, canvas.width, canvas.height);

Is a decent way to use it in a typesafe way without really getting in the way; but if you must remove null from the type definition, you should probably only remove it from the overloads for "2d" and "webgl" (and I guess there should be one for "bitmaprenderer"), but not the base signature with string.

[NaridaL]

This just seems like a perfect use case for !, I don't think changing the dts is necessary:

let canvas: HTMLCanvasElement = document.createElement("canvas");
let ctx: CanvasRenderingContext2D = canvas.getContext("2d")!; // <--
ctx.fillRect(0, 0, canvas.width, canvas.height);

[lzxb]

@NaridaL
The first time I saw this write, is there any relevant source?

[NaridaL]

@lzxb https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator

[lzxb]

Thank you