使用打字稿时,我需要为我使用的每个外部 js 导入一个 plugin.d.ts 吗?换句话说,我需要创建一个包含所有接口的 jQuery.d.ts 吗?
5 回答
jQuery 插件(和其他基于插件的库)的问题在于,您不仅需要为基础库提供 library.d.ts 文件,而且还需要为每个插件提供 plugin.d.ts 文件。并且不知何故,这些 plugin.d.ts 文件需要扩展 library.d.ts 文件中定义的库接口。幸运的是,TypeScript 有一个漂亮的小功能可以让你做到这一点。
目前在classes
项目中只能有一个类的单一锥形定义。因此,如果您定义一个class Foo
您放入的成员Foo
就是您所得到的。的任何附加定义都Foo
将导致错误。但是,使用interfaces
时,成员是附加的,因此如果您interface Bar
使用一组成员定义,您可以再次定义“界面栏”以将其他成员添加到interface
. 这是以强类型方式支持 jQuery 插件的关键。
因此,要添加对给定 jQuery 插件的支持,您需要为要使用的插件创建一个 plugin.d.ts 文件。我们在项目中使用jQuery 模板,所以这里是我们创建的 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 模板插件定义了一些自己的数据结构,因此我们需要为这些结构定义接口。
现在我们已经定义了额外的接口,我们只需要从使用的 .ts 文件中引用它们。为此,我们只需将以下引用添加到 .ts 文件的顶部即可。对于该文件,TypeScript 将看到基本的 jQuery 方法和插件方法。如果您使用多个插件,请确保您引用了所有单独的 plugin.d.ts 文件,您应该会很好。
/// <reference path="jquery.d.ts"/>
/// <reference path="jquery.tmpl.d.ts" />
使用.d.ts
声明文件可能会更好,但作为替代方案,您也可以使用 TypeScript 的全局扩充和声明合并来将方法添加到 JQuery 的接口。您可以在任何 TypeScript 文件中放置类似以下内容:
declare global {
interface JQuery {
nameOfPluginMethod(arg: any): JQuery;
}
}
保存 .ts 文件不会自动触发 Visual Studio 中的编译。您将需要构建/重建来触发编译。
声明文件 (file.d.ts) 让 TypeScript 编译器可以从该文件中获取有关您正在使用的 JavaScript 库的更好的类型信息。您可以在一个文件或多个文件中定义所有接口;这不应该有任何区别。您还可以使用以下方式从外部库“声明”您正在使用的类型/变量:
declare var x: number;
这将告诉编译器将 x 视为数字。
我一直在为 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;
}
在为插件创建你自己的.d.ts
文件之前,你应该检查它是否已经作为一个definitelyTyped库。例如,使用Typings,您可以运行以下命令:
typings install dt~bootstrap --global --save
...并且无需任何额外代码,您就可以访问各种 Bootstrap 插件。
如果他们没有您正在寻找的插件,请考虑贡献您自己的定义。