Writing typescript type defintions for jquery extensions

Viewed 107

I've some jquery extensions written in javascript. They are accessed like:

var myNumber = $.myStaticFunction(myString);    
var myObject = $('selector').myElementFunction(myString);

To use this functions in the typescript part, I can change the index.d.ts of jQuery:

interface JQuery<TElement extends Node = HTMLElement> extends Iterable<TElement> {

  ...
  myElementFunction: (sr:string) => {foo:number, bar:string};
  ...

interface JQueryStatic<TElement extends Node = HTMLElement> {        
  ...
  myStaticFunction: (sr:string) => number;
  ...

So I know this is the ugliest way to change directly the index.d.ts! I think I've to write a seperate myextension.d.ts. How does I've to write the defintion file for jquery extensions?

1 Answers

You don't need to change existing definition files. Typescript supports interface mering. You can just define your myextension.d.ts and use /// reference.

// myextension.d.ts
interface JQuery<TElement extends Node = HTMLElement> extends Iterable<TElement> {
    myElementFunction: (sr: string) => { foo: number, bar: string };
}

interface JQueryStatic<TElement extends Node = HTMLElement> {
    myStaticFunction: (sr: string) => number;
}


//usage.ts
/// <reference path="myextension.d.ts" />
var myNumber = $.myStaticFunction("myString");    
var myObject = $('selector').myElementFunction("myString");
Related