一、準(zhǔn)備項(xiàng)目

1，可以是現(xiàn)有的項(xiàng)目

需要有typescript 插件

2、或者初始化一個(gè)項(xiàng)目

首先通過(guò) npm init -y 生成 package.json 文件，并按照我們的需要進(jìn)行修改：

// E:\www\front-utils\package.json
{
  "name": "learning-typedoc",
  "version": "1.0.0",
  "scripts": {}
}

之后通過(guò) npm install -D typescript 安裝 TypeScript，并創(chuàng)建 tsconfig.json 提供語(yǔ)言服務(wù)：

// E:\www\front-utils\tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "sourceMap": false,
    "noEmit": true,
    "strict": true,
    "resolveJsonModule": true,
    "jsx": "preserve"
  },
  "include": ["./src/utils/*"]
}

二、新建導(dǎo)出方法

按照 tsconfig.json 中的 include 字段創(chuàng)建 ./src/utils/* 目錄，在其中編寫(xiě)自己的代碼。這里的代碼用于演示 TypeDoc 文檔生成，大家可以按照自己的想法自行修改。

// E:\www\front-utils\src\utils\index.ts
// 示例代碼，大家可以按照自己的想法自行修改
/** 接口 */
export interface MyInterface {
  /** 屬性1 */
  key1: number;

  /** 屬性2 */
  key2: string;
}

/** 類(lèi) */
export class MyClass {
  /** 類(lèi)的屬性 */
  prop1: number

  /** 構(gòu)造函數(shù) */
  constructor() {
    this.prop1 = this.privateMethod1(1, 2)
  }

  /**
   * 靜態(tài)方法
   * @param param 參數(shù)，字符串列表
   * @returns 返回 Promise 對(duì)象
   */
  static staticMethod1(param: string[]) {
    return Promise.resolve(param)
  }

  /**
   * 私有方法
   * @param param1 第一個(gè)參數(shù)
   * @param param2 第二個(gè)參數(shù)
   * @returns 兩數(shù)之和
   */
  private privateMethod1(param1: number, param2: number) {
    return param1 + param2
  }
  
  /** 公共方法 */
  publicMethod(param1: number, param2: number) {
    return this.prop1 + param1 + param2
  }
}

/** 類(lèi)型 */
export type MyType = 1 | 2 | 3 | 4

/**
 * 函數(shù)
 * @param param 參數(shù)
 */
export function myFunction(param: MyInterface) {
  return param
}

/** 沒(méi)有導(dǎo)出的成員，不會(huì)出現(xiàn)在文檔中 */
class MyClassNotExport {}

三、創(chuàng)建文檔導(dǎo)出項(xiàng)目

1，創(chuàng)建 doc 目錄,

在此目錄中放置所有與文檔相關(guān)的內(nèi)容，在此目錄下也創(chuàng)建 package.json 文件。

E:\www\front-utils> cd doc
E:E:\www\front-utils\doc> npm init -y

// E:\www\front-utils\doc\package.json
{
  "name": "doc",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

目前的目錄結(jié)構(gòu)如下：

learning-typedoc
├─ doc
│  └─ package.json
├─ src
│  └─ utils
│      └─ index.ts
├─ package.json
└─ tsconfig.json

四、TypeDoc 基本使用

1，在 doc 目錄下安裝 TypeDoc：

E:\www\front-utils\doc> npm install -D typedoc

2，TypeDoc 配置

創(chuàng)建TypeDoc 配置文件：typedoc.json

// E:\www\front-utils\doc\typedoc.json
{
    "$schema": "https://typedoc.org/schema.json",
    "entryPoints": ["../src/utils/*"], // 方法文件入口
    "out": "./dist" // 指定的導(dǎo)出文檔目錄
}

3，生成html文檔

通過(guò)命令 typedoc --options <filename>，就可以以配置文件中指定的選項(xiàng)運(yùn)行。

E:\www\front-utils\doc> npx typedoc --options ./typedoc.json

之后就生成文檔doc\dist，打開(kāi)index.html文件即可查看生成的文檔

五、生成markdown文檔

1，安裝typedoc-plugin-markdown插件

E:\www\front-utils\doc> npm i -D typedoc-plugin-markdown

2，配置markdown配置

// E:\www\front-utils\doc\typedoc.json
{
    "$schema": "https://typedoc.org/schema.json",
    "entryPoints": ["../src/utils/*"],
    "plugin": ["typedoc-plugin-markdown"], // 新增
    "out": "./dist"
}

3，生成markdown文檔

E:\www\front-utils\doc> npx typedoc --options ./typedoc.json

生成的markdown文檔在E:\www\front-utils\doc目錄

參考：https://juejin.cn/post/7310980511454232591