浅析Typescript类型声明文件定义、为什么需要声明文件、如何编写TS声明文件（如何自定义类型声明文件、如何给第三方库写声明文件）

function sum(a, b) {
    return a + b
}
module.exports = sum

import sum from './sum'
console.log(sum(2, 2))

"allowJs": true,
"outDir": "./dist",
"rootDir": "./src",

// 此时目录结构应该如下：
|-- test-declare
    |-- src
        |-- sum
            |-- index.js
        |-- index.ts
    |-- package.json
    |-- tsconfig.json

npx tsc -w

node dist/index.js
4

declare function sum(a: number, b: number): number
export default sum

// 此时目录结构为：
|-- test-declare
    |-- src
        |-- sum
            |-- index.js
            |-- index.d.ts      // 类型声明文件
        |-- index.ts
    |-- package.json
    |-- tsconfig.json

|-- test-declare
    |-- node_modules   // 手动创建 subtract 模拟第三方库 
        |-- subtract
            |-- src
                |-- index.js
            |-- index.d.ts
            |-- package.json
    |-- src
    |-- ....

// 编辑 node_modules/subtract/src/index.js 文件，内容如下：
function subtract(a, b) {
    return a - b
}
module.exports = subtract

// 编辑 node_modules/subtract/index.d.js 文件，内容如下：
declare function subtract(a: number, b: number): number
export default subtract

// 修改 package.json 文件，其中 types 指向声明文件路径。
"main": "./src/index.js",
"types": "./index.d.ts",

// 手动创建 node_modules/multiply 模拟第三方库，
// 切换到 multiply 目录下执行 $ npm init -y 初始化 multiply 工程。
|-- test-declare
    |-- node_modules   // 手动创建 multiply 模拟第三方库 
        |-- multiply
            |-- index.js
            |-- package.json
    |-- src
    |-- ....

// 编辑 test-declare/node_modules/multiply/index.js 文件：
function multiply(a, b) {
    return a * b
}
module.exports = multiply

declare function multiply(a: number, b: number): number
export default multiply

"baseUrl": "./",
"paths": {
    "*": [ "types/*" ]
}, 

// 此时目录结构为：
|-- test-declare
    |-- ...
    |-- src
    |-- types
        |-- multiply
            |-- index.d.ts       // 三方库的声明文件
    |-- ....

{
  "compilerOptions": {
    "declaration": true
  }
}

declare let/const  // 声明全局变量
declare function   // 声明全局方法
declare class      // 声明全局类
declare enum       // 声明全局枚举类型 
declare namespace  // 声明（含有子属性的）全局对象
interface/type     // 声明全局类型

// 变量
declare let userName: string;
declare const wx: any;
// 函数、函数重载
declare function getName(uid: number): string;
declare function getName(): string;
declare function getName(cb: () => any): any;
// 类
declare class Course {
  cid: number;
  constructor(cid){};
  getCoursePrice(): number;
}
// 枚举
declare enum Status {
  Loading,
  Success,
  Failed,
}
// 接口 interface declare 可以不需要
interface CourseInfo {
  cid: number;
  name: string;
}
interface CGIData<T> {
  data: T;
  retcode: 0;
}
// 命名空间
declare namespace User {
  // 局部 Test.User
  interface User {
    name: string;
    age: number;
  }
  function getUserInfo(name: string): User {
    return "";
  }
  namespace fn {
    function extend(obj: any): any;
  }
} 
// 声明合并
declare function User(id: number): string;

{
  "compilerOptions": {
    "module": "commonjs",
    "baseUrl": "./", // types文件夹的相对路径
    "paths": { "*": ["types/*"]}
  }
}

// 比如在 window 下挂载的一些全局变量:
interface Window {
    readonly request?: any;
    readonly devToolsExtension?: any;
    readonly wx?: any;
}

// 对已有模块进行拓展：
declare module "querystring" {
    function escape(str: string): string;
    function unescape(str: string): string;
}

// 还可以使用三斜线的方式对声明文件进行引用：
/// <reference path=”custom.d.ts" />