我们在使用非 TS 编写的第三方类库时，必须为这个类库编写声明文件，对外暴露它的 API。有时候，类库的声明文件是包含在源码中的，有时候是单独提供的，需要额外的安装。大多数类库的声明文件，社区已经为我们编写好了。

安装社区声明文件

安装声明文件的方法是：

  1. npm i @types/[包的名称] -D

在 TS 中使用一个外部类库时：

  • 首先要考虑是否有这个声明文件，查询方式：TypeSearch
  • 如果没有，则需要自己编写，也是为社区做贡献。参考：如何编写声明文件

编写声明文件

内置对象增加属性或方法

增加 global.d.ts 文件

  1. interface Number {
  2.   aa: number; // 增加属性
  3. }

全局类库

对于一个全局类库：

function globalLib(options) {
  console.log(options);
}

global.version = '1.0.0';

global.doSomething = function () {
  console.log('do something');
};

然后创建声明文件： xxx.d.ts 

declare function globalLib(options: globalLib.Options):void;

declare namespace globalLib {
  const version: string;
  function doSomething(): void;
  interface Options {
    [key: string]: any;
  }
}

模块类库

对于一个模块类库：commonJS 模块

const version = '1.0.0';

function doSomething() {
  console.log('do something');
}

function moduleLib(options) {
  console.log(options)
}

moduleLib.version = version;
moduleLib.doSomething = doSomething;

module.exports = moduleLib;

然后创建声明文件：

declare function moduleLib(options: Options): void;

interface Options {
  [key: string]: any;
}

declare namespace moduleLib {
  const version: string;
  function doSomething(): void;
}

export = moduleLib;

umd 库

对于一个 umd 库：

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(factory);
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  } else {
    root.umdLib = factory();
  }
})(this, function () {
  return {
    version: '1.0.1',
    doSomething() {
      console.log('do something')
    }
  }
})

然后创建声明文件：

declare namespace umdLib {
  const version: string;
  function doSomething(): void;
}

export as namespace umdLib;

export = umdLib;

在类库中添加属性

当我们需要给一个类库添加自定义的属性时

// 给模块的类库添加
import m from 'moment';
declare module 'momenrt' {
  export function myFunction():void;
}
m.myFunction = () => {}

// 给全局的类库添加
declare global {
  namespace globalLib {
      function doAnything():void
  }
}