在TypeScript中使用jQuery插件

使用typescript时，是否需要为我使用的每个外部js导入plugin.d.ts？

---

换句话说，我是否需要使用所有接口创建jQuery.d.ts？

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

Declare files（file.d.ts）允许TypeScript编译器从该文件中获得有关您正在使用的JavaScript库的更好类型信息。您可以在一个文件或多个文件中定义所有接口；这应该没有什么区别。您还可以通过以下方式从外部库“声明”正在使用的类型/变量：

declare var x: number;

---

这将告诉编译器将x视为一个数字。

jQuery插件（和其他基于插件的库）的问题是，不仅需要一个library.d.ts文件作为基本库，而且每个插件都需要一个plugin.d.ts文件。不知何故，这些plugin.d.ts文件需要扩展library.d.ts文件中定义的库接口。幸运的是，TypeScript有一个漂亮的小特性，可以让您这样做

对于

classes

，当前项目中只能有一个类的统一定义。因此，如果你定义了一个

类Foo

，你加入

Foo

的成员就是你得到的全部。

Foo

的任何附加定义都将导致错误。但是，对于

接口

，成员是可添加的，因此如果使用一组成员定义

接口栏

，则可以再次定义“接口栏”，以向

接口

添加其他成员。这是以强类型方式支持jQuery插件的关键

因此，要添加对给定jQuery插件的支持，您需要为要使用的插件创建plugin.d.ts文件。我们在项目中使用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（）时会显示这些方法
现在我们已经定义了额外的接口，我们只需要从消费的.ts文件中引用它们。为此，我们只需将下面的引用添加到.ts文件的顶部即可。对于该文件，TypeScript将同时看到基本jQuery方法和插件方法。如果你使用多个插件，只要确保你引用了所有的plugin.d.ts文件，你就应该很好

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

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


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

它不会涵盖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;
}

///
接口JQueryInputMaskOptions{
掩码？：字符串；
别名？：字符串；
占位符？：字符串；
重复？：编号；
贪婪？：布尔；
SkipOpationalPartCharacter？：字符串；
ClearComplete？：布尔值；
clearMaskOnLostFocus？：布尔值；
自动取消掩码？：布尔值；
showMaskOnFocus？：布尔值；
showMaskOnHover？：布尔值；
showToolTip？：布尔值；
isComplete？：（缓冲区，选项）=>{}；
数字？：布尔；
radixPoint？：字符串；
rightAlignNumerics？：布尔值；
oncomplete？：（值？：任意）=>无效；
onincomplete？：（）=>无效；
一旦清除？：（）=>无效；
onUnMask？：（maskedValue，unmaskedValue）=>void；
onBeforeMask？：（初始值）=>无效；
onKeyValidation？：（结果）=>无效；
onBeforePaste？：（pastedValue）=>void；
}
接口输入maskstatic{
默认值：inputMaskDefaults；
isValid:（值：字符串，选项：inputMaskStaticDefaults）=>布尔值；
格式：（值：字符串，选项：inputMaskStaticDefaults）=>布尔值；
}
接口输入maskstaticdefaults{
别名：字符串；
}
接口输入maskdefaults{
别名；
定义；
}
接口JQueryStatic{
inputmask：inputMaskStatic；
}
接口JQuery{
inputmask（操作：字符串）：任意；
inputmask（掩码：字符串，选项？：JQueryInputMaskOptions）：JQuery；
}
在为插件创建自己的
.d.ts
文件之前，您应该检查它是否已经作为库。例如，使用，可以运行以下命令：

typings install dt~bootstrap --global --save

。。。没有任何额外的代码，您就可以访问各种引导插件

如果他们没有你要找的插件，考虑贡献你自己的定义。
< P>使用<代码> .D.TS声明文件可能更好，但是作为替代，你也可以使用TypeScript来向jQuery的接口添加方法。您可以在任何TypeScript文件中放置以下内容：

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

如果您试图使用jQuery插件，则必须执行一个非常具体的步骤，因为您要处理的是现有的
declare$：JQueryStatic定义。我将添加一个答案，深入探讨使用jQuery插件的细节。这仍然是当前TypeScript版本（即0.9.5）的发展方向吗？这似乎在纯TypeScript文件中不起作用，例如，当定义
接口jQuery{}时，
myplugin.ts
它在该文件中将JQuery接口覆盖为空，从而导致许多错误。它在
d.ts
文件中工作。链接已断开：（使用flowtype定义文件如何执行此操作？
接口JQueryFlowType扩展JQuery{flowtype？：（选项：any）=>JQueryFlowType；}
。如果您不关心IDE支持，只想实例化插件，请使用前面的定义。请注意，您可以使用查找库类型是否可用。此