如何编写一个d.ts文件的步骤详解


Posted in Javascript onApril 13, 2018

前言

本文主要讲怎么写一个typescript的描述文件(以d.ts结尾的文件名,比如xxx.d.ts)。

最近开始从js转ts了。但是要用到一些描述文件(d.ts),常用的比如jquery等都可以通过 npm下载到别人已经写好的npm install @types/jquery。但是还是有一些小众的或者公司内部的公共库或者以前写过的公用js代码需要自己手动写描述文件。

之前也从网上面也找了一些资料,但还是看的云里雾里模糊不清,经过一段摸索,将摸索的结果记录下来,也希望可以给别人一个参考。

如果你只写js,d.ts对你来说也是有用的,大部分编辑器能识别d.ts文件,当你写js代码的时候给你智能提示。效果像这样:

如何编写一个d.ts文件的步骤详解

详情可以看我以前写过的一些文章:https://3water.com/article/138211.htm

通常,我们写js的是时候有两种引入js的方式:

1,在html文件中通过<script>标签全局引入全局变量。

2,通过模块加载器require其他js文件:比如这样var j=require('jquery')。

全局类型

首先以第一种方式举例。

变量

比如现在有一个全局变量,那对应的d.ts文件里面这样写。

declare var aaa:number

其中关键字declare表示声明的意思。全局变量是aaa,类型是数字类型(number)。当然了也可以是string类型或者其他或者:

declare var aaa:number|string //注意这里用的是一个竖线表示"或"的意思

如果是常量的话用关键字const表示:

declare const max:200

函数

由上面的全局变量的写法我们很自然的推断出一个全局函数的写法如下:

/** id是用户的id,可以是number或者string */
decalre function getName(id:number|string):string

最后的那个string表示的是函数的返回值的类型。如果函数没有返回值可以用void表示。

在js里面调用的时候就会提示:

如何编写一个d.ts文件的步骤详解

我们上面写的注释,写js的时候还可以提示。

有时候同一个函数有若干种写法:

如何编写一个d.ts文件的步骤详解

get(1234)
get("zhangsan",18)

那么d.ts对应的写法:

declare function get(id: string | number): string
declare function get(name:string,age:number): string

如果有些参数可有可无,可以加个?表示非必须。

declare function render(callback?:()=>void): string

js中调用的时候,回调传不传都可以:

render()
render(function () {
 alert('finish.')
})

class

当然除了变量和函数外,我们还有类(class)。

declare class Person {
 static maxAge: number //静态变量
 static getMaxAge(): number //静态方法
 constructor(name: string, age: number) //构造函数
 getName(id: number): string 
}

constructor表示的是构造方法:

如何编写一个d.ts文件的步骤详解 

如何编写一个d.ts文件的步骤详解 

其中static表示静态的意思,用来表示静态变量和静态方法:

如何编写一个d.ts文件的步骤详解 

如何编写一个d.ts文件的步骤详解 

对象

declare namespace OOO{ 
}

当然了这个对象上面可能有变量,可能有函数可能有类。

declare namespace OOO{
 var aaa: number | string
 function getName(id: number | string): string
 class Person {
 static maxAge: number //静态变量
 static getMaxAge(): number //静态方法
 constructor(name: string, age: number) //构造函数
 getName(id: number): string //实例方法
 }
}

其实就是把上面的那些写法放到这个namespace包起来的大括号里面,注意括号里面就不需要declare关键字了。
效果:

如何编写一个d.ts文件的步骤详解 

如何编写一个d.ts文件的步骤详解 

如何编写一个d.ts文件的步骤详解 

对象里面套对象也是可以的:

declare namespace OOO{
 var aaa: number | string
 // ...
 namespace O2{
 let b:number
 }
}

效果:

如何编写一个d.ts文件的步骤详解 

混合类型

有时候有些值既是函数又是class又是对象的复杂对象。比如我们常用的jquery有各种用法:

new $()
$.ajax()
$()

既是函数又是对象

declare function $2(s:string): void
declare namespace $2{
 let aaa:number
}

效果:

作为函数用:

如何编写一个d.ts文件的步骤详解

作为对象用:

如何编写一个d.ts文件的步骤详解

也就是ts会自动把同名的namespace和function合并到一起。

既是函数,又是类(可以new出来)

// 实例方法 
interface People{
 name: string
 age: number
 getName(): string
 getAge():number
}
interface People_Static{
 new (name: string, age: number): People
 /** 静态方法 */
 staticA():number
 
 (w:number):number
}
declare var People:People_Static

效果:

作为函数使用:

如何编写一个d.ts文件的步骤详解

类的静态方法:

如何编写一个d.ts文件的步骤详解

类的构造函数:

如何编写一个d.ts文件的步骤详解

类的实例方法:

如何编写一个d.ts文件的步骤详解

模块化

除了上面的全局的方式,我们有时候还是通过require的方式引入模块化的代码。

比如这样的效果:

如何编写一个d.ts文件的步骤详解 

对应的写法是这样的:

declare module "abcde" {
 export let a: number
 export function b(): number
 export namespace c{
  let cd: string
 }
 }

其实就是外面套了一层 module "xxx",里面的写法和之前其实差不多,把declare换成了export。

此外,有时候我们导出去的是一个函数本身,比如这样的:

如何编写一个d.ts文件的步骤详解 

对应的写法很简单,长这个样子:

declare module "app" {
 function aaa(some:number):number
  export=aaa
 }

以此类推,导出一个变量或常量的话这么写:

declare module "ccc" {
 const c:400
  export=c
 }

效果:

如何编写一个d.ts文件的步骤详解 

UMD

有一种代码,既可以通过全局变量访问到,也可以通过require的方式访问到。比如我们最常见的jquery:

 如何编写一个d.ts文件的步骤详解

如何编写一个d.ts文件的步骤详解

其实就是按照全局的方式写d.ts,写完后在最后加上declare namespace "xxx"的描述:

declare namespace UUU{
 let a:number
}
 
declare module "UUU" {
 export =UUU
}

效果这样:

作为全局变量使用:

如何编写一个d.ts文件的步骤详解

作为模块加载使用:

如何编写一个d.ts文件的步骤详解

其他

有时候我们扩展了一些内置对象。比如我们给Date增加了一个format的实例方法:

如何编写一个d.ts文件的步骤详解 

对应的d.ts描述文件这样写:

interface Date {
 format(f: string): string
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js继承的实现代码
Aug 05 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
angularjs基础教程
Dec 25 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
js模糊查询实例分享
Dec 26 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 #Javascript
Vue2.0 实现单选互斥的方法
Apr 13 #Javascript
Vue render深入开发讲解
Apr 13 #Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 #Javascript
vue组件的写法汇总
Apr 12 #Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 #jQuery
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 #Javascript
You might like
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
dedecms中使用php语句指南
2014/11/13 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
PHP中SESSION过期设置
2021/03/09 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
软件配置管理有什么好处
2015/04/15 面试题
中专自荐信
2013/10/13 职场文书
平安建设实施方案
2014/03/19 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
面试必备的求职信
2014/05/25 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
2016国培学习心得体会
2016/01/08 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL