文档章节

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

noonoo
 noonoo
发布于 2015/11/29 22:05
字数 830
阅读 4011
收藏 1

我们编写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;
}




© 著作权归作者所有

共有 人打赏支持
noonoo
粉丝 15
博文 65
码字总数 34160
作品 0
深圳
程序员
TypeScript基础入门之模块(一)

转发 TypeScript基础入门之模块(一) 模块 关于术语的一点说明: 请务必注意一点,TypeScript 1.5里术语名已经发生了变化。 "内部模块"现在称做"命名空间"。 "外部模块"现在则简称为"模块",这...

durban
09/30
0
0
Tide: 比lsp-mode更好的JavaScript智能补全插件

LSP (Language Server Protocol) 是微软领导开发的编程语言语法补全和代码分析框架, 好处是全世界黑客都一起开发 LSP 后端, 不论你用的是 Emacs, Vim 还是 Sublime, VSCode, Elicpse, Intell...

ManateeLazyCat
09/19
0
0
开始使用 TypeScript

简介 TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格,C#的首席架构...

施立
2017/11/02
0
3
【更新】Kendo UI for jQuery发布R2 2018|附下载

Kendo UI for jQuery提供了在短时间内构建现在Web应用程序所需要的一切。从70多个UI中选择,并轻松地将它们组合起来,创建出酷炫响应式的应用程序,同时将开发时间加快了50%。 更多资源请查看...

Miss_Hello_World
07/24
0
0
Angular 引入第三方类库bootstrap和jQuery

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xnh_565175944/article/details/82081010 Angular项目引入第三方类库 1.首先打开Node.js command prompt,进入...

slim_
08/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

阿里P8架构师深度概述分布式架构

简介 作为一名架构师,我们要专业,要能看懂代码,及时光着臂膀去机房,也能独挡一面!及时同事搞不定问题,或者撂挑子,你也能给老大一个坚定的眼神:不怕,有我在!还能在会议室上滔滔不绝...

java知识分子
13分钟前
0
0
zabbix利用自带的模板监控mysql数据库

zabbix利用自带的模板监控mysql数据库                                     作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任。 有些东...

linjin200
19分钟前
0
0
当刷新的Sandbox后,需要重新发布社区

当刷新的Sandbox后,需要重新发布社区 然后在登录页面设置中选择login/forgot password

在山的那边
20分钟前
0
0
Ubuntu 镜像文件下载

https://www.ubuntu.com/download/desktop

15834278076
23分钟前
0
0
解决php -v查看到版本于phpinfo()打印的版本不一致问题

一般造成这种原因可能是升级或多版本 用php -v 和phpinfo()查出来版本不一致,怎么解决呢 编辑/etc/profile文件在最后一行添加一个环境变量: export PATH="/usr/local/php/bin:$PATH" 最后保...

xiaogg
24分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部