在 TypeScript 中使用 jQuery 插件

jQuery插件(以及其他基于插件的库)的问题在于，你不仅需要一个库.d、 ts文件的基础库，但你还需要一个插件.d、 每个插件的ts文件.不知怎么的，这个插件.d、 ts文件需要扩展库中定义的库接口.d、 ts文件.幸运的是，TypeScript有一个漂亮的小功能，可以让你做到这一点.

对于classes，目前在一个项目中一个类只能有一个cononical定义.所以，如果你定义了class Foo，你在Foo上加的成员就是你得到的全部.Foo的任何附加定义都将导致错误.然而，对于interfaces，成员是加法的，因此如果用一组成员定义interface Bar，则可以第二次定义"接口栏"，将其他成员添加到interface.这是以强类型方式支持jQuery插件的关键.

你需要添加一个插件来支持jQuery.d、 要使用的插件的ts文件.我们在项目中使用jQuery Templates，所以这里是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 Templates插件定义了一些自己的数据 struct ，所以我们需要为这些 struct 定义接口.

既然我们已经定义了额外的接口，我们只需要从用户那里引用它们.ts文件.要做到这一点，我们只需将下面的参考资料添加到我们的.ts文件，就这样.对于该文件，TypeScript将同时看到基本jQuery方法和插件方法.如果你使用多个插件，只需确保你引用了所有的插件.d、 ts文件，你应该很好.

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