使用 TypeScript 重写 jQuery 插件

本文讲述使用 TypeScript 重写 jQuery 插件的历程,以及其中一些基本注意事项。

GitHub地址:codelegant/input-filter
Git@OSC地址:chuanfeng/input-filter

本文代码演示所有编辑器:Visual Studio Code(V 0.9.1)。

首先,TypeScript 比较接近强类型语言(由 C# 之父主导的项目,理所当然带有 C# 风格),在编码阶段提供 Intellisense 提示、Go Definition、Find All References、Rename… 等编译语言才有的功能,而编译时可预先抓出参数,类型,方法错误,降低执行阶段发现修复的高昂成本,首先要注意的就是 Find ALL References

jquery.d.ts

TypeScript 是强类型语言,所以一切引用都需要预告定义,类似于 C 语言中的头文件,在 Visual Studio 与 Visual Studio Code 中编码 TypeScript,你使用的所有方法引用应该都是可以在代码提示找到的(和C # 一模一样)
document refences

他的代码提示是通过检测名称为引用库实现,你可以通过编辑器来找到他,也可以访问lib.d.ts来找到他。但是 lib.d.ts 只提供了 JavaScript 的原生语法提示,如果你需要使用如 jQuery 的第三方库,就要显示的引入 “.d.ts” 文件了,官方地址jquery.d.ts

使用方法:第三库的引用文件需要我们手动引入,在文件的首先键入“///<reference path=”jquery.d.ts”/>”,然后VS Code就能找到引用提示了。
jquery refrence

如果你使用的第三方库在官方库文件中没有的话,那就要自己实现了,请参考writing-dts-files

使用Interface对参数进行限制

如果是一般的类型:如果 Number ,String 等,使用类型限制是很容易的,但如果一个参数是枚举型的,事件就变得麻烦点了,参考我在 StackOverflow 上的提问:TypeScript function accept argument value from an enum,我汲取了 Buzinas 的建议,并使用泛型加以改造,使用这个方法更具适用性。

模块化(module)

我使用类定义我的基本方法,他们在与 jQuery 绑定时才会实例化,在实例化之前,我把他们放在一个名为 Filter 的模块中,官方说明:Module
定义一个模块就是申明一个命名空间,唯一需要注意的是,如果要在外部使用模块中的成员,需要在成员的定义语句前加入关键字“export”,否成员对外是不可见的。

添加自己的类型引用

在这个插件中,因要兼容 IE8,所以需要使用 attachEvent() 方法来绑定事件,但是lib.d.ts 并未提供,所以需要我们自己实现,继承 lib.d.ts 的接口并扩展。

发表评论