在 TypeScript 中使用 jQuery 插件 [英] Using jQuery plugin in TypeScript

问题描述

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

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?

推荐答案

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

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.

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

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

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

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

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 模板 插件定义了一些自己的数据结构，所以我们需要为这些结构定义接口.

Breaking this down the first thing we did is to define the methods that get added to the JQuery interface. These let you get intellisense and type checking when you type $('#foo').tmpl(); Next we added methods to the JQueryStatic interface which show up when you type $.tmpl(); And finally the jQuery Templates plugin defines some of its own data structures so we needed to define interfaces for those structures.

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

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.

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

这篇关于在 TypeScript 中使用 jQuery 插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！