如何用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;}