Add Typescript typings

[notadamking]

There are currently no Typescript typings available for this repo. This makes using this package from a Typescript library very difficult and inconvenient.

Here is a start (not my own work):
https://github.com/gmarty/nesCompiler/blob/master/src/declarations/node-canvas.d.ts

[LinusU]

I think that we should be able to leverage the typings that ship with TypeScript for the browser Canvas somehow 🤔

That way we would only have to type the small non-standard functions that we have added...

[zbjornson]

In a private project, we have the below in our ext.d.ts file:

interface NodeCanvas extends HTMLCanvasElement {
	getContext(contextId: "2d", contextAttributes?: Canvas2DContextAttributes): NodeCanvasCanvasRenderingContext2D;
	// Disallow contexts other than "2d":
	getContext(contextId: "webgl" | "experimental-webgl", contextAttributes?: WebGLContextAttributes): null;
	getContext(contextId: string, contextAttributes?: {}): NodeCanvasCanvasRenderingContext2D | null;
}

interface NodeCanvasCanvasRenderingContext2D extends CanvasRenderingContext2D {
	antialias: "default" | "gray" | "none" | "subpixel";
}

declare module "canvas" {
	export function createImageData(data: Uint8ClampedArray|Uint16Array, width: number, height?: number): ImageData;
	export function createCanvas(width: number, height: number): NodeCanvas|HTMLCanvasElement;
	export function registerFont(src: string, fontFace: {family: string, weight?: string, style?: string}): undefined;
}

It's not complete (the only nonstandard definitions present are the ones that we're using), but it shows how to extend the native definitions. Sometime I can work on putting a full set in here (or someone else can; don't wait for me).

[varHarrie]

@zbjornson Could you please raise a PR to DefinitelyTyped.

BTW, Canvas2DContextAttributes should be CanvasRenderingContext2DSettings.

[LinusU]

@varHarrie I would prefer adding the typings directly here, instead of in DefinitelyTyped, which I believe is the recommended approach by them. Or is there any reason why it should live there that I'm missing? 🤔

[varHarrie]

@LinusU There is not much different if we could update it in time.😃

[playground]

I'm wanting to use this with Typescript as well. Is there a working solution?

[icfantv]

@playground there's a PR up: #1330