hanyeah

做一个项目，不大可能从头到尾都是自己手写的代码，总会用到一些开源库，使用js开发，直接用不会存在问题，使用TypeScript开发就有问题了。

比如，我要用pixi.js开发一个项目，而pixi.js不是基于TypeScript开发的，只有js文件，在TypeScript中怎么使用呢？

新建一个Main.tswen文件，直接写

let sp:PIXI.Sprite=new PIXI.Sprite();

编译器会报错。

TypeScript中有一个关键字declare，这个关键字类似于c里边的extern，就是告诉编译器，后面声明的东西已经在别的地方声明过了，可以拿来用，不要报错，具体在哪里声明的你就别管了。

结合TypeScript里边的any类型，就可以像在js中一样试用pixi.js了。

declare let PIXI:any;
var sp=new PIXI.Sprite();

虽然可以用了，但是TypeScript的类型检测、代码提示功能就不能用了。这和我们使用TypeScript开发的初衷是相悖的。

有没有其他方法能让pixi.js在typeScript中有代码提示呢？

既然declare可以定义变量，可不可以用它来定义模块呢？

我们新建一个pixi.ts，代码如下：

declare module PIXI{
	export class Sprite{}
}

然后修改Main.ts中的代码：

///<reference path="pixi.ts"/>
var sp:PIXI.Sprite=new PIXI.Sprite();

不报错，而且可以编译成功。

我们只需要在pixi.ts中，把用到的类、方法、属性都声明一遍就可以用了。但是纯手写工作量略大。

TypeScript开发经常会提到一个“.d.ts”文件，据说外部js库，只要有这个文件，就可以在TypeScript中直接用了。我搜索了一下，Github上还真有pixi.js.d.ts:https://github.com/pixijs/pixi-typescript.

下载pixi.js.d.ts放到Main.ts的同级目录，然后修改Main.ts如下：

///<reference path="pixi.js.d.ts"/>
var sp:PIXI.Sprite=new PIXI.Sprite();

没有报错，编译成功。

打开pixi.js.d.ts看看，原来真的和我们的pixi.ts写的一样，只是把pixi中所有的类属性方法都写进去了。原来这就是“.d.ts”文件。有了“.d.ts”文件，用起来就很方便了。

不知道这个是借助了工具还是纯手写的，纯手写的话，真的是个体力活。