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

我们编写jquery 插件时,通过会有以下重要概念需要考虑,我通常这么叫:

1、Jquery 方法  。比如$.ajax( )    $.trim( )   它们特点就是直接绑在jquery 自身上。

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

3、Jquery的一些扩充的属性。比如防止和其它插件重名,我会给自己的插件建个“命名空间”。

      比如 $ .auto.do(  something ) 。这里的auto相当于赋于$上的一个属性。

4、插件的默认参数,事件等对象。 比如: $.ajax( { url:......, type:.......}) ;  对 这个参数,我们要定义一个对象。

d.ts文件  ts文件 的关系?

这个非常类似于 C语言里,  h文件 和 c文件的关系,先声明,后编写。

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

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

/**  * 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

这个插件只涉及了上面的  1、3、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; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菜鸟前端工程师

JavaScript学习笔记025-闭包0缓存计算0console属性

1083
来自专栏Java架构师历程

安卓 jni 开发错误 UnsatisfiedLinkError: Native method not found

很明显是因为 native 方法找不到,google 下发现该错误出现频率还蛮高的,基本有两种:

2484
来自专栏H2Cloud

python的解释器spython介绍

Python解释器spython介绍 简介   出于个人爱好和某种需求,我再16年对python的解释器产生了浓厚兴趣,并且下定决心重新实现一个版本。我个人再游...

3985
来自专栏王亚昌的专栏

实战设计模式系列-Strategy(策略)

    项目最近需要写一个逻辑srv,srv的业务逻辑比较简单,收包、解包、根据命令字进行业务处理、回包。 考虑每一次请求都是一项任务,而逻辑srv是一个任务管...

961
来自专栏游戏开发那些事

【随笔】android开发的学习路线

第一阶段:Java面向对象编程 1.Java基本数据类型与表达式,分支循环。  2.String和StringBuffer的使用、正则表达式。  3.面向对象...

1313
来自专栏阿凯的Excel

Python读书笔记14(字典的增改删)

上期分享了字典的创建于访问,本期和大家分享的是最重要的营改增政策! 不好意思!串台了,本期和大家分享的是字典的增改删! 一、我们先创建一下新的字典 ? 二、添加...

2888
来自专栏Python专栏

数据结构图在python中的应用

1676
来自专栏java一日一条

编写难于测试的代码的5种方式

有一次,我在一个讲座上听到主持人问听众如何故意编写难于测试的代码。在场的小伙伴都惊呆了,因为没有任何人会故意写这种糟糕的代码。我记得他们甚至给不出一个好的答案。

1152
来自专栏前端新视界

CSS 预处理器中的循环

本文由 nzbin 翻译,黄利民 校稿。未经许可,禁止转载! 英文出处:Loops in CSS Preprocessors 发表地址:http://we...

2276
来自专栏Java成神之路

Android之 学习路线

1.Java基本数据类型与表达式,分支循环。  2.String和StringBuffer的使用、正则表达式。  3.面向对象的抽象,封装,继承,多态,类与...

941

扫码关注云+社区

领取腾讯云代金券