如何用typescript 来写一个jquery 插件的 d.ts

时间 2019-11-07

标签如何 typescript 来写一个 jquery 插件 d.ts 栏目 JQuery 繁體版

原文原文链接

咱们编写jquery 插件时，经过会有如下重要概念须要考虑，我一般这么叫：jquery

一、Jquery 方法。好比$.ajax( ) $.trim( ) 它们特色就是直接绑在jquery 自身上。git

二、Jquery对象方法。好比$("#btn").click( ), 它们是绑定在一个JQUERY对象上面。github

三、Jquery的一些扩充的属性。好比防止和其它插件重名，我会给本身的插件建个“命名空间”。ajax

好比 $ .auto.do( something ) 。这里的auto至关于赋于$上的一个属性。json

四、插件的默认参数，事件等对象。好比： $.ajax( { url:......, type:.......}) ; 对这个参数，咱们要定义一个对象。cookie

d.ts文件 ts文件的关系？dom

这个很是相似于 C语言里， h文件和 c文件的关系，先声明，后编写。测试

d.ts 文件编写后，你写的 ts 代码才会有智能提示，因此咱们写一个插件，必须先规划好它有哪些个方法，参数、属性，将它们写入到d.ts文件。this

建议每一个人都先看一下jquery.d.ts文件再往下看，里面最重要的代码以下,这里要用心体会一下，为何名称里加上JQueryStatic 和JQuery的区别。
url

/**
* Static members of jQuery (those on $ and jQuery themselves)
*/
interface JQueryStatic { ‍ }

/**
* The jQuery instance members
*/
interface JQuery { }

declare module "jquery" {
export = $;
}
declare var jQuery: JQueryStatic; //注意这个变量是 jQuery ,和上面的 JQuery 是两个东西。
declare var $: JQueryStatic;

jquery.cookie插件的d.ts文件说明

最简单的小插件，以它的d.ts文件为例，看看这个文件到底应该如何编写？

项目地址：https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/jquery.cookie

这个插件只涉及了上面的一、三、4这三个概念的写法, 我说说个人理解。

jquery.cookie.d.ts 声明文件

jquery.cookie-tests.ts 测试

// Type definitions for jQuery Cookie Plugin 1.4.1   说明部分

///<reference path="jquery/jquery.d.ts" />    引用jquery的声明
//第4个概念：参数的写法，其实就是普通接口。 注意 ?  这个技巧。
interface JQueryCookieOptions {
    expires?: any;
    path?: string;
    domain?: string;
    secure?: boolean;
}
//第3个概念：jquery的扩充属性及属性下附着的方法的写法
interface JQueryCookieStatic {
    //如下属性及方法是挂在   $.cookie上的
    raw?: boolean;
    json?: boolean;
    defaults?: JQueryCookieOptions;
    //这个属性ts的重载写法
    (): {[key:string]:string};
    (name: string): any;
    (name: string, value: string): void;
    (name: string, converter: (value: string) => any): any;
    (name: string, value: string, options: JQueryCookieOptions):void;
    (name: string, value: any): void;
    (name: string, value: any, options: JQueryCookieOptions): void;
}
//第1个概念：jquery方法的编写。 
interface JQueryStatic {   
   //如下属性是挂在 $ 上的。为$扩展一个cookie属性，
   //它拥有JQueryCookieStatic 的下面的属性及功能
    cookie?: JQueryCookieStatic;  
    //重载
    removeCookie(name: string): boolean;
    removeCookie(name: string, options: JQueryCookieOptions): boolean;
}

///<reference path="../jquery/jquery.d.ts" />
///<reference path="jquery.cookie.d.ts" />
class TestObject {
    text: string;
    value: number;
    constructor (text: string, value: number) {
        this.text = text;
        this.value = value;
    }
}
class CookieOptions implements JQueryCookieOptions {
    expires: number;
    path: string;
    domain: string;
    secure: boolean;
}
//对  JQueryCookieStatic 的测试
$.cookie("the_cookie", "the_value");
console.log($.cookie("the_cookie"));

var testObject = new TestObject("Hello World", 5);
//对 JQueryCookieOptions  的测试
var cookieOptions = new CookieOptions();
cookieOptions.path = "/";
cookieOptions.domain = "jquery.com";
$.cookie.json = true;

$.cookie("test", testObject, cookieOptions);
var result = <TestObject>$.cookie("test");
console.log(result.text);

$.cookie.defaults = cookieOptions;
//我增长的一句  JQueryStatic 的测试
$.removeCookie("test");

如今来看，第1个概念和第3个概念实际上是一个东西。都是将属性或方法挂到某个变量的下面。

第4个概念其实就是Typescript里的普通接口而已。

剩下第2个概念：Jquery对象的方法, 看到如今，写这个很容易了吧！示例以下：

interface JQuery { Plugin(options?: Object): JQuery;}