声明文件的编写和使用

我们知道ts最关键的功能在于静态类型检查，其代码最终都会被编译成js，那么对于本身就是js的文件该如何启用静态类型检查呢？这就是声明文件的作用了，其目的就在于告诉ts编译器引用文件的类型信息。

使用

TypeScript开发很麻烦的一个问题就三方库的类型定义了，因为很多库都是基于JS编写的，经常会出现找不到类型的问题。解决方法也一直在演变，从最初的DefinitelyTyped到typings到@types，下面将一一介绍，但目前最推荐的使用方式还是@types。

DefinitelyTyped

这是一个集中管理三方库声明文件的组织，当你引入的三方库没有声明文件时，可以先去这个组织的Github仓库下载一份相对应的声明文件将之引用进来。但每个库都去手动下载对应的声明文件不仅麻烦，也不方便管理，所以有了后来的Typings。

Typings

这是一个管理Typescript声明文件的工具，使用前需要先通过npm安装。如果需要一个库的声明文件，在项目文件夹下输入如下命令：

typings install *** --save

然后在你的项目文件夹中就会自动创建一个名为typing的文件夹保存三方库的声明文件。类似于package.json管理三方库，我们也可以使用一个名为typings.json的配置文件管理三方声明文件。通过typings init命令初始化，安装声明文件时带上save选项即可将信息添加到依赖记录表中，结构如下:

{
    "dependencies": {
        "***": "registry:dt/***#version+***"
    }
}

可以看到，虽然方便了些，但还是将三方库定义和三方库内容分开管理了，显然不如同步管理来的方便，于是@Types应运而生。

@Types

在TypeScript2.0之后，编译时将会默认查看项目任意层的node_modules/@types自动获取已安装的声明文件，安装方式和三方库无异:

npm install --save @types/***

也可以通过tsconfig.json的compilerOptions选项自定义声明文件的文件夹：

{
    "compilerOptions": {
        "typeRoots": []，  // 规定默认查找文件夹
        "types": [] // 规定默认查找三方库
    }
}

以上介绍的使用方法适用于三方库没有捆绑声明文件的情况。其实当编写三方库时，更推荐作者将声明文件直接捆绑进包中，这样开发者在ts项目中npm install后即可直接使用。捆绑实现于package.json中，指定types字段路径即可。实例如下：

{
  "name": "***",
  "version": "***",
  "main": "./src/***",
  "types": "./types/***"
}

编写

前面谈的是如何引用一个声明文件，接下来就说说编写一个声明文件的方法。假设我们有如下一个模块文件

// File: ./node_modules/sample/index.js

let a = 1;
export default {
    setA: function(val) {
        a = val;
    },
      getA: function() {
        return a;
    },
      a
}

全局类型声明

declare module "sample" {
    export interface Sample {
        setA(val: number): void;
          getA(): number;
          a: number;
    }
}

全局类型声明写法将模块名称引入了全局空间，一旦在项目中引用了这个声明文件就可以自由使用。

模块导出声明

export declare interface Sample {
     setA(val: number): void;
     getA(): number;
     a: number;
}

模块导出声明单从内容上看是无法知道其所属模块的，因为其必须和模块内容文件放在一起作为内建声明文件，当模块被项目导入时随之同时导入。

综上可知，当三方库时通过模块加载的形式引入时比较适合采用模块导出声明同步引入声明文件。当三方库通过script标签引入或者需要定义多个模块声明文件时，采用全局类型声明的方式更为适合。