TS声明文件

• 形如：**.d.ts的文件，用于整合一个项目或库使用的各种类型结构，便于使用typescript类型检查、自动补全等功能

• 对于采用TS编写的项目，在编译的时候让 TS 自动生成声明文件，并在打包的时候将其一起发布

• JS编写的项目，为了更好开发，则需要手动整合导出模块的类型声明文件

• 在项目编译过后，.d.ts文件不会生成任何代码。

• 默认使用tsc —init初始化项目的TS配置文件，会开启skipLibCheck跳过声明文件检查, 只会对当前开发项目的TS代码进行编译检查；设置为false以后会对声明文件进行类型校验。

结构

全局库

• 不需要使用任何形式的引入或导出语法。如果是浏览器执行环境：
  • 用脚本标签引用库
  • npm下载包引入
• 全局库的文件：
  • 顶级的赋值声明
  • 一个或多个赋值语句到顶级对象上，如浏览器的window，node中的global

扩展

• 用 declare 声明的变量，函数，对象，命名空间，类，枚举；纯类型声明的接口，类型别名，都可以作为全局类型使用

  //*.d.ts
  //变量
  declare var/let/const global0: number;
  //函数
  declare function globalGreet(greeting: string): void;
  //命名空间
  declare namespace myLib {
      function makeGreeting(s: string): string;
      let numberOfGreetings: number;
  }
  //类
  declare class Greeter {  //直接赋予构造函数实现
      constructor(public greeting: string) {};
      showGreeting(): void;
  }
  //接口
  interface GreetingSettings {
      greeting: string;
      duration?: number;
      color?: string;
  }
  //类型别名
  type GreetingType = string | GreetingSettings;
  
  

• 命名空间和对象的区别：
  • 命名空间为一个分割代码的独立作用域，其中的方法变量使用常规赋值语句定义。调用的时候命名空间作为一个对象整体，内部的方法变量作为属性调用；同时内部变量方法也可独立导出使用
  • 对象，一个整体，内部方法属性仅属于此对象，无法单独导出某个属性或方法

  declare let objSpace = {
      export inner: 'object'  //not work
  }
  declare namespace objSpace {
      export let inner :string = 'inner'  //ok
  }
  

模块化库

第三方模块的声明文件

• 三方模块可能由js或TS编写，为了方便开发，会提取出专门的TS类型声明文件实现类型补充
• 如果是第三方的js模块，声明文件可能会作为npm上传的 @type/xx库文件，需要手动下载，但是ts2.0会自动引入下载的带有 @type/xx声明文件

  //手动下载示例：
  npm install --save @types/lodash
  npm install -S @types/jquery
  

• 在typescript 2.0以后，默认所有可见的@types包，会在编译过程中包含进来，例如：./node_modules/@types/、../node_modules/@types/和../../node_modules/@types/等等。
• 如果自定义tsconfig.json文件，指定了typeRoots或者types，只有typeRoots目录下的包才会被引入，或者被types指定的包。例如：设置"types": []会禁用自动引入@types包的功能。

个人编写的模块声明文件

• TS声明文件通过tsconfig.json中配置path路径获取编写的局部模块声明文件的目录

根据tsconfig.json配置信息中target和lib的设置不同，TS所能识别的模块化语法也不同

• JavaScript CommonJS (Node.js）：

  • 导出：module.exports 和 exports
  • 导入：require

  //导出
  module.exports = {xxx: xxx}
  module.exports.mod1 = 'xxxx'
  //导入
  import * as path from 'path'
  

  //导出
  exports.mod1 = 'xxx'
  //导入
  import xx = require('xx') 
  

  // 没有类型声明，默认导入方式，TS会识别为 any 类型 
  const xx = require("xx"); 
  

• ES6模块语法：

  • 导出：export 和 export default
  • 导入：import

  //导出
  export default {}
  
  //导入
  import xx from "xx";
  

  //导出
  export xx
  
  //导入
  import {xx} from "xx";
  

扩展

• 模块规范发展过程：CommonJS（服务端） =>AMD（浏览器） => CMD => ES6 Module模块化

UMD模块

• 如果同时具备模块或全局库的特征，既可以用脚本也可以模块加载方式引入的模块——Moment.js；jquery

全局插件

• 全局代码，改变全局对象的结构，比如在Array.prototype或String.prototype上增下新方法