TypeScript 声明文件

TypeScript 教程

做游戏这么大个项目，总不能每行代码都自己写，大部分时间其实都是在网上找别人写好的代码拿来用。

例如我这边项目要接入ZIP压缩的功能，那就去网上找，但是只找到 JavaScript 版本的，能不能用？

必须能用，TypeScript也是编译为JavaScript。但是不能直接使用，需要把JavaScript代码里的函数提取出来，编写一个中间文件提供给TypeScript，这个中间文件就是声明文件。

------------
#### 声明文件

声明文件以 .d.ts 为后缀，例如：

monster.d.ts

声明文件或模块的语法格式如下：

declare module Module_Name {
	}

TypeScript 引入声明文件语法格式：

/// <reference path = " monster.d.ts" />

当然，很多流行的第三方库的声明文件不需要我们定义了，直接去Github搜索吧。

下面用个例子来说明声明文件怎么写。

##### 实例

这里写了一个 Monster.js 的 JavaScript代码。

```javascript
//Monster.js
var ThisisGame;
(function (ThisisGame) {
    var Monster = /** @class */ (function () {
        function Monster() {
        }
        Monster.prototype.Attack = function () {
            console.log("Attack");
        };
        return Monster;
    }());
    ThisisGame.Monster = Monster;
})(ThisisGame || (ThisisGame = {}));
```

这个代码，可以创建一个 Monster,并且调用 Monster.Attack()。

对 Monster.js 编写声明文件 Monster.d.ts

```javascript
//Monster.d.ts
declare module ThisisGame { 
   export class Monster { 
      Attack() : void; 
   }
}
```

在 test.js里面进行引用，并创建Monster，调用 Monster.Attack()。

```javascript
//test.js
/// <reference path = "Monster.d.ts" />
var tmpMonster=new ThisisGame.Monster()
tmpMonster.Attack()
```

然后编译

tsc --out app.js test.ts

编译成功后，在HTML网页中使用它。

新建HTML文件 index.html

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>游戏人生 | 游戏开发一时爽，一直开发一直爽(www.thisisgame.com.cn)</title>
<script src = "Monster.js"></script> 
<script src = "app.js"></script> 
</head>
<body>
    <p>对网页鼠标右键，查看元素，打开调试窗口，切换到控制台，查看log</p>
</body>
</html>
```

在firefox或其他浏览器中打开

![typescript 声明文件 .d.ts](/static/img/1580891755202011100.png "typescript 声明文件 .d.ts")

------------

这里的 Monster.js并不是我手写的，而是TypeScript生成，按下面的步骤。

编写 Monster.ts

```javascript
//Monster.ts
namespace ThisisGame
{
    export class Monster
    {
        Attack(): void{
            console.log("Attack")
        }
    }
}
```

然后使用命令生成

tsc --module commonjs Monster.ts