本文循序渐进教向大家如何给现有项目中 JavaScript 的代码「编写声明文件」。

1. 描述全局命名空间对象

全局变量 myLib 上有一个函数 makeGreeting 用于创建问候语，以及一个属性numberOfGreetings，表示到目前为止已经制作的问候语数量。

代码案例

声明方式

通过 declare namespace声明命名空间

(资料图)

在命名空间内部({})声明函数类型和变量类型(用分号 ;隔开)，描述命名空间下可以访问的函数或值（通过点运算符(dotted notation)）。

2. 描述全局变量和函数

全局变量 foo表示 widgets 展现次数。

全局函数 greet可以接受字符串参数调用，向用户展示问候信息

代码案例

声明方式

使用 declare var声明全局变量

使用 declare function声明全局函数

3. 描述重载函数

所谓重载函数（Overloaded Functions），即函数调用方式不止一种。

getWidget 函数接受一个数字并返回一个 Widget，或者接受一个字符串并返回一个Widget 数组。

代码案例

声明方式

因为不是声明命名空间，而是一个全局函数，所以使用 declare function就行。

4. 描述函数的对象类型参数

调用 greet 函数时，您必须传递一个 GreetingSettings 对象。该对象具有以下属性：

1. greeting：必填字符串

2. duration：可选时间长度（以毫秒为单位）

3. color：可选字符串，例如‘＃ff00ff’

代码案例

声明方式

GreetingSettings是个对象类型，所以要使用 interface声明了

greet函数依旧使用 declare function声明

5. 描述函数的联合类型参数

调用 greet 函数时，您可以提供一个字符串、或返回字符串的函数、或 Greeter 实例。

代码案例

声明方式

greet函数依旧使用 declare function声明

其参数 GreetingLike是个联合类型

6. 描述类（构造函数、属性和方法）

创建 Greeter2类的实例对象 myGreeter, 支持扩展 Greeter2类型（比如 SpecialGreeter）的方式创建自定义 greeter 对象。

代码案例

声明方式

本题我们会借用 declare class描述 class 或类 class 对象。有属性、有方法还有构造函数。

7. 描述类实例上方法的参数

greeter 对象可以记录到文件方法（.log()）或显示提示方法（.alert()）。 可以向 .log(...)提供 LogOptions并向 .alert(...)提供 AlertOptions

代码案例

声明方式

LogOptions和 AlertOptions也可以通过 declare namespace方式声明的，与在“描述全局命名空间对象”中不同的是，前者只声明了类型，后者则是声明了函数/变量。

参考

https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html