在 TypeScript 中使用 jQuery 插件

Using jQuery plugin in TypeScript

提问by MuriloKunze

When using typescript do I need to import a plugin.d.ts for every external js that I use? In other words, do I need to create a jQuery.d.ts with all the interfaces?

使用打字稿时，是否需要为我使用的每个外部 js 导入 plugin.d.ts？换句话说，我是否需要创建一个包含所有接口的 jQuery.d.ts？

回答by Steven Ickman

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.

jQuery 插件（和其他基于插件的库）的问题在于，您不仅需要一个 library.d.ts 文件作为基础库，而且每个插件还需要一个 plugin.d.ts 文件。不知何故，plugin.d.ts 文件需要扩展 library.d.ts 文件中定义的库接口。幸运的是，TypeScript 有一个漂亮的小功能，可以让你做到这一点。

With classesthere currently can only be a single cononical definition of a class within a project. So if you define a class Foothe members you put on Fooare all you get. Any additional definitions of Foowill result in an error. With interfaces, however, the members are additive so if you define interface Barwith 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.

随着classes有目前只能是一个类的项目中的单个cononical定义。因此，如果您定义一个class Foo成员，那么您将Foo获得所有成员。的任何附加定义都Foo将导致错误。有了interfaces，但是，成员都是添加剂，所以如果你定义interface Bar了一组成员，你可以定义“界面栏”第二次额外添加成员interface。这是以强类型方式支持 jQuery 插件的关键。

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 Templatesin our project so here's the jquery.tmpl.d.ts file we created to add support for that plugin:

因此，要添加对给定 jQuery 插件的支持，您需要为要使用的插件创建 plugin.d.ts 文件。我们在我们的项目中使用jQuery 模板，所以这里是我们创建的 jquery.tmpl.d.ts 文件以添加对该插件的支持：

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 JQueryinterface. These let you get intellisense and type checking when you type $('#foo').tmpl();Next we added methods to the JQueryStaticinterface which show up when you type $.tmpl();And finally the jQuery Templatesplugin defines some of its own data structures so we needed to define interfaces for those structures.

打破这个，我们做的第一件事是定义添加到JQuery接口的方法。这些让您在键入时获得智能感知和类型检查$('#foo').tmpl();Next 我们向JQueryStatic界面添加了在您键入时显示的方法$.tmpl();最后jQuery 模板插件定义了一些自己的数据结构，因此我们需要为这些结构定义接口。

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.

现在我们已经定义了额外的接口，我们只需要从消费 .ts 文件中引用它们。为此，我们只需将下面的引用添加到 .ts 文件的顶部即可。对于该文件，TypeScript 将同时看到基本的 jQuery 方法和插件方法。如果您使用多个插件，请确保您引用了所有单独的 plugin.d.ts 文件，您应该很好。

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

回答by Jonathan Potter

Using a .d.tsdeclaration file is probably better, but as an alternative you can also use TypeScript's global augmentation and declaration mergingto add methods to JQuery's interface. You can place something like the following in any of your TypeScript files:

使用.d.ts声明文件可能更好，但作为替代方案，您也可以使用 TypeScript 的全局扩充和声明合并来向 JQuery 的接口添加方法。您可以在任何 TypeScript 文件中放置类似以下内容：

declare global {
    interface JQuery {
        nameOfPluginMethod(arg: any): JQuery;
    }
}

回答by mohamed hegazy

Saving a .ts file does not automatically trigger compilation in Visual Studio. You will need to build/rebuild to trigger the compilation.

保存 .ts 文件不会自动触发 Visual Studio 中的编译。您将需要构建/重建以触发编译。

Declare files (file.d.ts) lets the TypeScript compiler get better type information about the JavaScript libraries you are using from that file. You can have your interfaces defined all in one file, or in multiple files; this should not make any difference. You can also "declare" the types/variables you are using from external libraries using something like:

声明文件 (file.d.ts) 可让 TypeScript 编译器从该文件中获取有关您正在使用的 JavaScript 库的更好类型信息。您可以在一个文件或多个文件中定义所有接口；这应该没有任何区别。您还可以使用以下内容从外部库“声明”您正在使用的类型/变量：

declare var x: number;

which will tell the compiler to treat x as a number.

这将告诉编译器将 x 视为一个数字。

回答by Jpirok

I've been looking for a d.ts for jquery.inputmask and finally created a simple one of my own. It's at

我一直在寻找 jquery.inputmask 的 d.ts 并最终创建了一个我自己的简单的。它在

https://github.com/jpirok/Typescript-jquery.inputmask

https://github.com/jpirok/Typescript-jquery.inputmask

or you can see the code below.

或者你可以看到下面的代码。

It won't cover all cases for jquery.inputmask, but will probably handle most.

它不会涵盖 jquery.inputmask 的所有情况，但可能会处理大多数情况。

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

interface JQueryInputMaskOptions {
    mask?: string;
    alias?: string;
    placeholder?: string;
    repeat?: number;
    greedy?: boolean;
    skipOptionalPartCharacter?: string;
    clearIncomplete?: boolean;
    clearMaskOnLostFocus?: boolean;
    autoUnmask?: boolean;
    showMaskOnFocus?: boolean;
    showMaskOnHover?: boolean;
    showToolTip?: boolean;
    isComplete?: (buffer, options) => {};
    numeric?: boolean;
    radixPoint?: string;
    rightAlignNumerics?: boolean;
    oncomplete?: (value?: any) => void;
    onincomplete?: () => void;
    oncleared?: () => void;
    onUnMask?: (maskedValue, unmaskedValue) => void;
    onBeforeMask?: (initialValue) => void;
    onKeyValidation?: (result) => void;
    onBeforePaste?: (pastedValue) => void;
}

interface inputMaskStatic {
    defaults: inputMaskDefaults;
    isValid: (value: string, options: inputMaskStaticDefaults) => boolean;
    format: (value: string, options: inputMaskStaticDefaults) => boolean;
}

interface inputMaskStaticDefaults {
    alias: string;
}

interface inputMaskDefaults {
    aliases;
    definitions;
}

interface JQueryStatic {
    inputmask: inputMaskStatic;
}

interface JQuery {
    inputmask(action: string): any;
    inputmask(mask: string, options?: JQueryInputMaskOptions): JQuery;
}

回答by StriplingWarrior

Before creating your own .d.tsfile for the plugin, you should check to see whether it's already as a DefinitelyTypedlibrary. For example, using Typings, you can run the command:

在.d.ts为插件创建你自己的文件之前，你应该检查它是否已经作为一个确定类型的库。例如，使用Typings，您可以运行以下命令：

typings install dt~bootstrap --global --save

... and without any extra code you'll have access to the various Bootstrap plugins.

...无需任何额外代码，您就可以访问各种 Bootstrap 插件。

If they don't have the plugin you're looking for, consider contributing your own definition.

如果他们没有您正在寻找的插件，请考虑贡献您自己的定义。