文档章节

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

noonoo
 noonoo
发布于 2015/11/29 22:05
字数 830
阅读 3868
收藏 1
点赞 0
评论 0

我们编写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
粉丝 14
博文 60
码字总数 28854
作品 0
深圳
程序员
开始使用 TypeScript

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

施立
2017/11/02
0
3
TypeScript初战Chrome插件:Bilibili弹幕热度

TL;DR 这是一个用来在B站视频进度条上方创建显示弹幕热度的Chrome插件,以弹幕数量-时间的直方图显示,在高能处(定义为短时间内有大量弹幕出现的时间点)有明显的峰值,可以用来直观地看视频...

MegrezZhu
06/07
0
0
UI组件Kendo UI发布R2 2018|附下载

通过70多个可自定义的UI组件,Kendo UI可以创建数据丰富的桌面、平板和移动Web应用程序。通过响应式的布局、强大的数据绑定、跨浏览器兼容性和即时使用的主题,Kendo UI将开发时间加快了50%...

Miss_Hello_World
07/17
0
0
TypeScript手册翻译系列4-模块

模块 在TypeScript中利用模块(module)来组织代码。这里将讨论内部和外部模块,以及在何时使用哪种方式更合适,以及怎么使用。当然也会讨论一些高级话题,例如如何使用外部模块,以及在Typ...

一配
2015/08/23
0
1
TypeScript 开发系列(一)——简介与简单创建

免责声明:由于关于创建TypeScript的文章已经很多了,在这里为了完善我的这个系列,从网络上copy了下面这篇介绍,原文地址:http://www.cnblogs.com/liangquewei/archive/2012/11/15/2772298...

lhan
2013/01/09
0
0
Node.js 框架 Egg 2.6.1 发布,改进文档

简介 Node.js 框架 Egg 2.6.1 发布了。Egg 是阿里 Node.js 的核心基础框架,面向『企业级的 Web 基础框架』这个领域,提供了「微内核 + 插件机制 + 框架定制能力」,完美达成生态共建和差异化...

周其
04/14
0
0
Mobile First! Wijmo 5 之 架构

CSDN移动开发频道率先报道的《Mobile First!jQuery UI组件集Wijmo五年最大更新》引起开发者极大关注。 本文就开发者关心的话题之一架构,展开叙述。 Wijmo 5是一组JavaScript控件,但是不要...

葡萄城控件技术团队
2014/10/22
0
1
Node.js + TypeScript 写后端工具

前言 现在 Node.js 的生态越来越成熟,有好多公司直接使用 Node 构建其后端应用,放在线上跑。TypeScript 是微软的编程语言,近年来受到的关注也是越来越多。 作为一个常年写后端接口的人,便...

hezhiming
02/23
0
0
在 Vue 中使用 TypeScript 中的一些实践(思考)

Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: :使用基础 Vue 构造器,创建一个“子类”。此种写法与 Vue 单文件组件标准形式最为接近,唯一不同仅是...

三毛丶
07/05
0
0
在 Vue 中使用 TypeScript 的一些思考(实践)

Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: :使用基础 Vue 构造器,创建一个“子类”。此种写法与 Vue 单文件组件标准形式最为接近,唯一不同仅是...

三毛丶
07/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

HashMap? ConcurrentHashMap? 相信看完这篇没人能难住你!

前言 Map 这样的 Key Value 在软件开发中是非常经典的结构,常用于在内存中存放数据。 本篇主要想讨论 ConcurrentHashMap 这样一个并发容器,在正式开始之前我觉得有必要谈谈 HashMap,没有它...

crossoverJie
12分钟前
2
0
OSChina 周一乱弹 —— 你的朋友圈有点生锈了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @Devoes :分享Trademark的单曲《Only Love (电视剧《妙手仁心 II》插曲)》: 《Only Love (电视剧《妙手仁心 II》插曲)》- Trademark 手机党少...

小小编辑
今天
249
9
【面试题】盲人坐飞机

有100位乘客乘坐飞机,其中有一位是盲人,每位乘客都按自己的座位号就坐。由于盲人看不见自己的座位号,所以他可能会坐错位置,而自己的座位被占的乘客会随便找个座位就坐。问所有乘客都坐对...

garkey
今天
1
0
谈谈神秘的ES6——(二)ES6的变量

谈谈神秘的ES6——(二)ES6的变量 我们在《零基础入门JavaScript》的时候就说过,在ES5里,变量是有弊端的,我们先来回顾一下。 首先,在ES5中,我们所有的变量都是通过关键字var来定义的。...

JandenMa
今天
2
0
arts-week1

Algorithm 594. Longest Harmonious Subsequence - LeetCode 274. H-Index - LeetCode 219. Contains Duplicate II - LeetCode 217. Contains Duplicate - LeetCode 438. Find All Anagrams ......

yysue
今天
2
0
NNS拍卖合约

前言 关于NNS的介绍,这里就不多做描述,相关的信息可以查看NNS的白皮书http://doc.neons.name/zh_CN/latest/nns_background.html。 首先nns中使用的竞价货币是sgas,关于sgas介绍可以戳htt...

红烧飞鱼
今天
1
0
Java IO类库之管道流PipeInputStream与PipeOutputStream

一、java管道流介绍 在java多线程通信中管道通信是一种重要的通信方式,在java中我们通过配套使用管道输出流PipedOutputStream和管道输入流PipedInputStream完成线程间通信。多线程管道通信的...

老韭菜
今天
1
0
AB 压力测试

Ubuntu 安装AB apapt-get install apache2-utils 使用AB 压力测试 -c 并发数 -n请求总数 ab -c 3000 -n 10000 http://localhost/test/index.php AB只能测试localhost 返回结果 This is Apac......

xiawet
今天
0
0
用Python绘制红楼梦词云图,竟然发现了这个!

Python在数据分析中越来越受欢迎,已经达到了统计学家对R的喜爱程度,Python的拥护者们当然不会落后于R,开发了一个个好玩的数据分析工具,下面我们来看看如何使用Python,来读红楼梦,绘制小...

猫咪编程
今天
1
0
Java中 发出请求获取别人的数据(阿里云 查询IP归属地)

1.效果 调用阿里云的接口 去定位IP地址 2. 代码 /** * 1. Java中远程调用方法 * http://localhost:8080/mavenssm20180519/invokingUrl.action * @Title: invokingUrl * @Description: * @ret......

Lucky_Me
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部