在 TypeScript 中使用 jQuery 插件

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

jQuery 插件（以及其他基于插件的库）的问题在于，您不仅需要基本库的library.d.ts 文件，而且还需要每个插件的plugin.d.ts 文件。并且以某种方式，这些plugin.d.ts 文件需要扩展library.d.ts 文件中定义的库接口。幸运的是，TypeScript 有一个漂亮的小功能可以让您做到这一点。

With classes目前，项目中的类只能有一个圆锥定义。所以如果你定义一个class Foo你穿上的成员Foo就是你得到的一切。任何附加定义Foo将导致错误。和interfaces，但是，成员是可加的，因此如果您定义interface Bar对于一组成员，您可以再次定义“界面栏”以将其他成员添加到interface。这是以强类型方式支持 jQuery 插件的关键。

因此，要添加对给定 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;
}

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

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

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