TypeScript: Create a type definition file for a jQuery widget

As I mentioned in a previous blog post, one of the great features of TypeScript is the support for definition files. For most popular JavaScript libraries a definition file exists, but last week I wanted to use a jQuery widget that didn’t had a type definition file(yet).

So I decided to create one myself. The important part is to understand how to link your widget to the existing jQuery type definitions.

If you want to extend the $ sign directly, you have to create an interface JQueryStatic and put your functions in it.

If you want to extend the $(‘’) selector method, you have to create an interface JQuery and put your functions there.

	/// <reference path="../jquery/jquery.d.ts" />
	// Type definitions for html2canvas
	interface JQuery {
	html2canvas(options?: any): JQuery;
	}
	declare var html2canvas: JQueryStatic;

view raw html2canvas.d.ts hosted with ❤ by GitHub

$(document.body).html2canvas({});

view raw UsageSample.ts hosted with ❤ by GitHub