编写d.ts文件步骤详解

这次给大家带来编写d.ts文件步骤详解，编写d.ts文件的 注意事项 有哪些，下面就是实战案例，一起来看一下。

前言

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

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

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

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

详情可以看我以前写过的一些文章：http://www.jb51.net/article/138211.htm

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

1，在html文件中通过 标签全局引入全局变量。

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里面调用的时候就会提示：

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

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

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表示的是 构造方法 ：

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

对象

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关键字了。 效果：

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

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

混合类型

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

new $() $.ajax() $() 既是函数又是对象

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

作为函数用：

作为对象用：

也就是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 效果：

作为函数使用：

类的静态方法：

类的构造函数：

类的实例方法：

模块化

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

比如这样的效果：

对应的写法是这样的：

declare module "abcde" { export let a: number export function b(): number export namespace c{ let cd: string } } 其实就是外面套了一层 module "xxx"，里面的写法和之前其实差不多，把declare换成了export。

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

对应的写法很简单，长这个样子：

declare module "app" { function aaa(some:number):number export=aaa } 以此类推，导出一个变量或常量的话这么写：

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

UMD

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

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

declare namespace UUU{ let a:number } declare module "UUU" { export =UUU } 效果这样：

作为全局变量使用：

作为模块加载使用：

其他

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

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

interface Date { format(f: string): string } 相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！