在 Typescript 中使用 JQuery 插件

Question

I've got a JQuery plugin (mixItUp) that I'm trying to use with Typescript, which doesn't have it's own *.d.ts file.

How can I make it work with typescript?

I've made my own mixItUp.d.tds file with the following content:

interface JQuery
{
    mixItUp():any;
}

In the module that I'm trying to use mixItUp in, I am using the following code:

$('#mySelector').mixItUp();

It compiles fine, and I get intellisense for mixItUp, so somehow it's picked up the mixItUp.d.ts file without me referencing it.

In the html, I'm loading in jquery, then the non-typescript (Pure js) mixItUp library before this module, so I know both jquery and mixitup really exists at that point in time.

However, when I load the page I get the following error message:

$(...).mixItUp is not a function(…)

Most of the guides I'm finding seem to be using what I understand to be the old way of referencing *.d.ts files.

Can someone please explain the correct way to use JQuery plugins with typescript, as well as if possible how to reference non typescript libraries (I assume the technique will be similar).

Thanks.

Answer 1

If it's happening at runtime, it's most likely not caused by Typescript, since TS just gets compiled to JS. Since TS itself has no knowledge of your library and only gets fed the information about it by your interface, it compiles that call as-is(which can be proven, by just looking at the output in the Developer console or similar).

So make sure mixItUp is loaded correctly, before your code is executed(but after jQuery) and it should work fine(given that the jQuery version you're using is supported by the plugin)