Extend JQueryStatic for a JQuery Plugin that has no definition file

Question

I use the IFrame Transport Plugin for JQuery. It introduces a new property iframe on the JQueryAjaxSettings interface. Unfortunately the plugin has no definition file, which means it throws errors in Intellisense and when compiling the project because I have to use that iframe property in my code.

So I created 2 new Interfaces in a separate d.ts file to extend JQuery's definition file:

interface JQueryIframeTransportStatic extends JQueryStatic {
    ajax(settings: IJQueryIframeTransportAjaxSettings): JQueryXHR;
}

interface IJQueryIframeTransportAjaxSettings extends JQueryAjaxSettings {
    iframe: boolean;
}

But this throws the following error when compiling:

TS2430: Build: Interface 'JQueryStaticIframeTransport' incorrectly extends interface 'JQueryStatic'.

I see that TypeScript may be confused by the new ajax function introduced by my interface. But it has a different signature. How else could I extend it?

Answer 1

The interface can be extended like this:

interface JQueryStatic {
    ajax(settings: IJQueryIframeTransportAjaxSettings): JQueryXHR;
}

interface IJQueryIframeTransportAjaxSettings extends JQueryAjaxSettings {
    iframe: boolean;
}

This just adds the new function declaration, not requiring the extends construct. Building on this, you can do it with just one declaration, viz.

interface JQueryAjaxSettings {
    iframe: boolean;
}