在TypeScript中使用jQuery插件

Question

使用打字稿时，是否需要为每个使用的外部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插件的关键。

所以要增加对你将需要为您要使用的插件中plugin.d.ts文件给定的jQuery插件的支持。我们使用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插件定义了一些它自己的数据结构，所以我们需要定义这些结构的接口。

现在，我们有额外的接口definied我们只是需要从消费.ts文件中引用它们。为此，我们只需将以下参考添加到.ts文件的顶部即可。对于那个文件，TypeScript将会看到基本的jQuery方法和插件方法。如果您使用多个插件，请确保您引用所有单个plugin.d.ts文件，并且您应该很好。

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

Answer 2

保存.ts文件不会自动在Visual Studio中触发编译。您将需要编译/重建以触发编译。

声明文件（file.d.ts）让打字稿编译器获得有关您从该文件中使用JavaScript库更好的类型信息。您可以将所有接口定义在一个文件或多个文件中;这应该没有任何区别。您也可以在“申报”你是从外部库使用类似的使用类型/变量：

declare var x: number; 

它会告诉编译器把X为数字。

Answer 3

我一直在为jquery.inputmask寻找d.ts，并最终创建了一个简单的我自己的。这是一个在

https://github.com/jpirok/Typescript-jquery.inputmask

，或者你可以看到下面的代码。

它不会涵盖jquery的所有情况。输入掩码，但可能处理最多。

///<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; 
} 

Answer 4

之前创建自己的.d.ts文件的插件，你应该检查是否它已经作为一个DefinitelyTyped库。例如，使用Typings，可以运行命令：

typings install dt~bootstrap --global --save 

...并没有任何额外的代码，你将有机会获得各种引导插件。

如果他们没有你正在寻找的插件，请考虑提供你自己的定义。

Answer 5

使用.d.ts声明文件可能更好，但作为替代，您还可以使用TypeScript的global augmentation and declaration merging将方法添加到JQuery的界面。你可以把喜欢的东西在你的任何打字稿文件的以下内容：

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