Using jQuery plugin in TypeScript

by

The issue with jQuery plugins (and other plugin based libraries) is that not only do you need a library.d.ts file for the base library, but you also need a plugin.d.ts file for each plugin. And somehow thes plugin.d.ts files need to extend the library interfaces defined in the library.d.ts files. Fortunately, TypeScript has a nifty little feature that lets you do just that.

With classes there currently can only be a single cononical definition of a class within a project. So if you define a class Foo the members you put on Foo are all you get. Any additional definitions of Foo will result in an error. With interfaces, however, the members are additive so if you define interface Bar with a set of members you can define ‘interface Bar’ a second time to add additional members to the interface. That’s the key to supporting jQuery plugins in a strongly typed way.

So to add support for a given jQuery plugin you’re going to need to create a plugin.d.ts file for the plugin you want to use. We use jQuery Templates in our project so here’s the jquery.tmpl.d.ts file we created to add support for that plugin:

interface JQuery
{
    tmpl(data?:any,options?:any): JQuery;
    tmplItem(): JQueryTmplItem;
    template(name?:string): ()=>any;
}

interface JQueryStatic
{
    tmpl(template:string,data?:any,options?:any): JQuery;
    tmpl(template:(data:any)=>string,data?:any,options?:any): JQuery;
    tmplItem(element:JQuery): JQueryTmplItem;
    tmplItem(element:HTMLElement): JQueryTmplItem;
    template(name:string,template:any): (data:any)=>string[];
    template(template:any): JQueryTemplateDelegate;
}

interface JQueryTemplateDelegate {
    (jQuery: JQueryStatic, data: any):string[];
}

interface JQueryTmplItem
{
    data:any;
    nodes:HTMLElement[];
    key:number;
    parent:JQueryTmplItem;
}

Breaking this down the first thing we did is to define the methods that get added to the JQuery interface. These let you get intellisense and type checking when you type $('#foo').tmpl(); Next we added methods to the JQueryStatic interface which show up when you type $.tmpl(); And finally the jQuery Templates plugin defines some of its own data structures so we needed to define interfaces for those structures.

Now that we have the additional interfaces definied we just need to reference them from the consuming .ts files. To do that we just add the references below to the top of our .ts file and that’s it. For that file, TypeScript will see both the base jQuery methods and the plugin methods. If you use multiple plugins just make sure you refernce all of your individual plugin.d.ts files and you should be good. 

/// <reference path="jquery.d.ts"/>
/// <reference path="jquery.tmpl.d.ts" />

More Related Contents:

  1. ‘unknown’ vs. ‘any’
  2. Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index
  3. TypeScript function overloading
  4. How can I see the full expanded contract of a Typescript type?
  5. typescript interface require one of two properties to exist
  6. How do you emulate nominal typing in TypeScript?
  7. Typescript: check if a type is a union
  8. How do you produce a .d.ts “typings” definition file from an existing JavaScript library?
  9. TypeScript – extract interface members only – possible?
  10. Typescript Interface – Possible to make “one or the other” properties required?
  11. Forcing excess-property checking on variable passed to TypeScript function
  12. Combining generics with index type
  13. Why can Typescript not figure out the type in my code?
  14. How to overwrite incorrect TypeScript type definition installed via @types/package
  15. TypeScript TS7015 error when accessing an enum using a string type parameter
  16. DeepReadonly Object Typescript
  17. Property ‘includes’ does not exist on type ‘string[]’
  18. Typescript: Cannot use import statement outside a module
  19. Angular2 – Share data between components using services
  20. ‘this’ implicitly has type ‘any’ because it does not have a type annotation
  21. TypeScript class implements class with private functions
  22. Get route query params
  23. TypeScript empty object for a typed variable
  24. ts An async function or method in ES5/ES3 requires the ‘Promise’ constructor
  25. Typescript: change function type so that it returns new value
  26. What does a TypeScript index signature actually mean?
  27. Why does a Typescript type conditional on `T extends undefined`, with T instantiated with `boolean`, resolve T to `never`?
  28. What exactly $event object do in Angular 2?
  29. new Typescript “satisfies” operator
  30. Narrowing a return type from a generic, discriminated union in TypeScript

Leave a Comment