Question

类库分为三类：全局类库、模块类库、 UMD 类库

declare var // 声明全局变量
declare function // 声明全局方法
declare class // 声明全局类
declare enum // 声明全局枚举类型
declare global // 扩展全局变量
declare module // 扩展模块

大多数的声明文件社区已经帮我们安装好了，使用 @types/包名 声明文件即可

Typescript 声明文件查找 https://microsoft.github.io/TypeSearch/

以 jquery 为例子

yarn add @types/jquery

引入了一个 JS 类库，但是社区又没有提供类型声明文件，我该如何去编写它的类型声明文件

先确定这个库的类型，全局库、模块库、还是 UMD 库，然后参照下面介绍的方法，把它的 API 声明逐步添加进来（暂时用不到的 API 也可以不写）

3.1 三种类库声明文件写法

3.1.1 全局库

// global-lib.d.ts
  
declare function globalLib(options: globalLib.Options): void;
// 函数和命名空间的声明合并 为这个函数提供了一些属性
declare namespace globalLib {
  const version: string;
  function doSomething(): void;
  interface Options {
    [key: string]: any
  }
}

// global-lib.js
// 和声明文件对应
function globalLib(options) {
  console.log(options);
}

globalLib.version = '1.0.0';

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

// 全局使用 index.ts
globalLib({x:1})
globalLib.doSomething()

3.1.2 模块类库

// module-lib.d.ts
declare function moduleLib(options: Options): void

interface Options {
  [key: string]: any
}

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

export = moduleLib

// module-lib.js
const version = '1.0.0';

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

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

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

module.exports = moduleLib;

// index.ts 使用
import umdLib from './umd-lib'

umdLib.doSomething()

3.1.3 UMD 类库

// umd-lib.d.ts

declare namespace umdLib {
  // 省略了 export
  const version: string
  function doSomething(): void
}

// UMD 库不可缺少的语句
export as namespace umdLib

export = umdLib

// umd-lib.js
(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.0',
    doSomething() {
      console.log('umdLib do something');
    }
  }
}))

// index.ts 使用
import umdLib from './umd-lib'
// 可以不用导入 umd-lib 模块。但是需要打开 tsconfig.tson 中的 umd 配置
umdLib.doSomething()

3.2 两种插件声明文件写法

3.2.1 模块化插件 declare module

declare module 可以给类库添加一些自定义方法。 扩展模块

// 模块插件
import m from 'moment';
declare module 'moment' {
  // 给 moment 自定义一些方法
  export function myFunction(): void;
}
m.myFunction = () => {}

3.2.2 全局插件 declare global

// 全局插件
declare global {
  namespace globalLib {
    function doAnyting(): void
  }
}
// 在全局变量添加方法
// 会对全局变量造成污染 一般不这么做
globalLib.doAnyting = () => {}

3.3 jquery 声明文件示例

// index.d.ts 入口

// Type definitions for jquery 3.3
// Project: https://jquery.com
// Definitions by: Leonard Thieu <https://github.com/leonard-thieu>
//         Boris Yankov <https://github.com/borisyankov>
//         Christian Hoffmeister <https://github.com/choffmeister>
//         Steve Fenton <https://github.com/Steve-Fenton>
//         Diullei Gomes <https://github.com/Diullei>
//         Tass Iliopoulos <https://github.com/tasoili>
//         Jason Swearingen <https://github.com/jasons-novaleaf>
//         Sean Hill <https://github.com/seanski>
//         Guus Goossens <https://github.com/Guuz>
//         Kelly Summerlin <https://github.com/ksummerlin>
//         Basarat Ali Syed <https://github.com/basarat>
//         Nicholas Wolverson <https://github.com/nwolverson>
//         Derek Cicerone <https://github.com/derekcicerone>
//         Andrew Gaspar <https://github.com/AndrewGaspar>
//         Seikichi Kondo <https://github.com/seikichi>
//         Benjamin Jackman <https://github.com/benjaminjackman>
//         Poul Sorensen <https://github.com/s093294>
//         Josh Strobl <https://github.com/JoshStrobl>
//         John Reilly <https://github.com/johnnyreilly>
//         Dick van den Brink <https://github.com/DickvdBrink>
//         Thomas Schulz <https://github.com/King2500>
//         Terry Mun <https://github.com/terrymun>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3

// 三斜线引入模块

/// <reference types="sizzle" />
/// <reference path="JQueryStatic.d.ts" />
/// <reference path="JQuery.d.ts" />
/// <reference path="misc.d.ts" />
/// <reference path="legacy.d.ts" />

export = jQuery;