在TypeScript中使用jQuery插件

Question

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

Answer 1

jQuery插件(以及其他基于插件的库)的问题是,您不仅需要基本库的library.d.ts文件,而且还需要每个插件的plugin.d.ts文件.不知何故,这些plugin.d.ts文件需要扩展library.d.ts文件中定义的库接口.幸运的是,TypeScript有一个漂亮的小功能,可以让你做到这一点.

随着classes有目前只能是一个类的项目中的单个cononical定义.因此,如果你定义了你所穿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 Templates插件定义了一些自己的数据结构,所以我们需要为这些结构定义接口.

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

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

Answer 2

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

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