typescript - 在 TypeScript 中使用 jQuery 插件

Question

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

Answer 1

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

对于 classes，目前在一个项目中只能有一个类的锥形定义。因此，如果您定义一个 class Foo，您得到的就是您放在 Foo 上的成员。 Foo 的任何附加定义都将导致错误。但是，对于 interfaces，成员是可加的，因此如果您使用一组成员定义 interface Bar，您可以再次定义“interface Bar”以将其他成员添加到接口(interface)。这是以强类型方式支持 jQuery 插件的关键。

因此，要添加对给定 jQuery 插件的支持，您需要为要使用的插件创建一个 plugin.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 接口(interface)的方法。这些让您在键入时获得智能感知和类型检查输入 $.tmpl(); 最后是 jQuery Templates插件定义了一些它自己的数据结构，因此我们需要为这些结构定义接口(interface)。

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

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