在TypeScript中使用jQuery插件

时间:2012-10-04 02:29:03

标签: typescript

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

5 个答案:

答案 0 :(得分:99)

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

对于classes,目前在项目中只能有一个类的单一的cononical定义。因此,如果您定义了一个class Foo,那么您提供的成员就会FooFoo的任何其他定义都将导致错误。但是,对于interfaces,成员是附加的,因此如果您使用一组成员定义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接口的方法。这些允许您在键入$('#foo').tmpl();时进行智能感知和类型检查接下来我们向JQueryStatic界面添加方法,这些方法在您键入$.tmpl();时显示,最后jQuery Templates插件定义了一些它自己的数据结构,所以我们需要为这些结构定义接口。

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

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

答案 1 :(得分:5)

使用.d.ts声明文件可能更好,但作为替代方法,您还可以使用TypeScript的global augmentation and declaration merging向JQuery的界面添加方法。您可以在任何TypeScript文件中放置以下内容:

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

答案 2 :(得分:4)

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

声明文件(file.d.ts)允许TypeScript编译器从该文件中获取有关您正在使用的JavaScript库的更好的类型信息。您可以将接口定义在一个文件中,也可以定义在多个文件中;这应该没有任何区别。您还可以使用以下内容从外部库“声明”您正在使用的类型/变量:

declare var x: number;

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

答案 3 :(得分:3)

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

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

答案 4 :(得分:2)

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

typings install dt~bootstrap --global --save

...如果没有任何额外的代码,您将可以访问各种Bootstrap插件。

如果他们没有您要查找的插件,请考虑提供您自己的定义。