在TypeScript中使用jQuery插件
当使用打字稿，我需要导入一个plugin.d.ts为我使用的每个外部js？ 换句话说，我是否需要用所有接口创build一个jQuery.d.ts？
jQuery插件（以及其他基于插件的库）的问题是，不仅需要基础库的library.d.ts文件，还需要为每个插件使用plugin.d.ts文件。 不知何故，plugin.d.ts文件需要扩展library.d.ts文件中定义的库接口。 幸运的是，TypeScript有一个漂亮的小function，可以让你做到这一点。
有了classes ，目前只能有一个项目中的类的单一cononical定义。 所以如果你定义了一个class Foo ，你放在class Foo的成员就是你Foo得到的。 任何附加的Foo定义都会导致错误。 然而，使用interfaces ，成员是可加的，所以如果用一组成员定义interface Bar ，则可以再次定义“接口Bar”，以向interface添加其他成员。 这是以强types的方式支持jQuery插件的关键。
因此，要添加对给定的jQuery插件的支持，您将需要为您要使用的插件创build一个plugin.d.ts文件。 我们在项目中使用jQuery模板 ，所以我们创build了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接口的方法。 当你input$('#foo').tmpl();时，这些让你获得智能感知和types检查$('#foo').tmpl(); 接下来，我们将方法添加到JQueryStatic接口，当您键入$.tmpl(); 最后jQuery模板插件定义了一些自己的数据结构，所以我们需要为这些结构定义接口。
现在我们已经定义了额外的接口，我们只需要从耗费的.ts文件中引用它们。 要做到这一点，我们只需将以下参考添加到.ts文件的顶部即可。 对于那个文件，TypeScript将会看到基本的jQuery方法和插件方法。 如果你使用多个插件，只要确保你引用了你所有的plugin.d.ts文件，你就应该是好的。
/// <reference path="jquery.d.ts"/> /// <reference path="jquery.tmpl.d.ts" />
保存.ts文件不会自动在Visual Studio中触发编译。 你将需要build立/重build来触发编译。
声明文件（file.d.ts）可让TypeScript编译器从该文件中获取有关正在使用的JavaScript库的更好types信息。 您可以将您的接口全部定义在一个文件或多个文件中; 这应该没有任何区别。 你也可以使用类似的方法从外部库中“声明”你使用的types/variables：
declare var x: number;
这会告诉编译器将x视为一个数字。
我一直在为jquery.inputmask寻找一个d.ts，并最终创build了一个我自己的简单的。 它在
https://github.com/jpirok/Typescript-jquery.inputmask
或者你可以看到下面的代码。
它不会涵盖jquery.inputmask的所有情况，但可能处理的最多。
///<reference path="../jquery/jquery.d.ts" /> interface JQueryInputMaskOptions { mask?: string; alias?: string; placeholder?: string; repeat?: number; greedy?: boolean; skipOptionalPartCharacter?: string; clearIncomplete?: boolean; clearMaskOnLostFocus?: boolean; autoUnmask?: boolean; showMaskOnFocus?: boolean; showMaskOnHover?: boolean; showToolTip?: boolean; isComplete?: (buffer, options) => {}; numeric?: boolean; radixPoint?: string; rightAlignNumerics?: boolean; oncomplete?: (value?: any) => void; onincomplete?: () => void; oncleared?: () => void; onUnMask?: (maskedValue, unmaskedValue) => void; onBeforeMask?: (initialValue) => void; onKeyValidation?: (result) => void; onBeforePaste?: (pastedValue) => void; } interface inputMaskStatic { defaults: inputMaskDefaults; isValid: (value: string, options: inputMaskStaticDefaults) => boolean; format: (value: string, options: inputMaskStaticDefaults) => boolean; } interface inputMaskStaticDefaults { alias: string; } interface inputMaskDefaults { aliases; definitions; } interface JQueryStatic { inputmask: inputMaskStatic; } interface JQuery { inputmask(action: string): any; inputmask(mask: string, options?: JQueryInputMaskOptions): JQuery; }
在为插件创build自己的.d.ts文件之前，应该检查它是否已经作为DefinitelyTyped库。 例如，使用types ，你可以运行命令：
typings install dt~bootstrap --global --save
…没有任何额外的代码，你将有权访问各种Bootstrap插件。
如果他们没有你正在寻找的插件，请考虑提供你自己的定义。
