typedoc使用配置

4,529 阅读1分钟

TypeDoc将TypeScript源代码中的注释转换为呈现的HTML文档或JSON模型;TypeScript项目的文档生成器。

使用typedoc的前提是使用了typeScript开发

安装使用typeScript

1.install-typescript

cnpm install --save-dev typescript

image.png

2.生成tsconfig

tsc --init

image.png

typescript 解析,编译的规则在这里定义

3.编写ts文件

/**
 * Animal 类
 */
class Animal {
  /** 名称 */
  name: string;
  constructor(theName: string) {
    this.name = theName;
  }
  /**
   * 走动
   * @param distanceInMeters 距离
   */
  move(distanceInMeters: number = 0) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}

/**
 * Snake 类
 */
class Snake extends Animal {
  constructor(name: string) {
    super(name);
  }
  /**
   * 蛇行
   * @param distanceInMeters 距离
   */
  move(distanceInMeters = 5) {
    console.log('Slithering...');
    super.move(distanceInMeters);
  }
}

/**
 * Horse 类
 */
class Horse extends Animal {
  constructor(name: string) {
    super(name);
  }
  /**
   * 飞驰
   * @param distanceInMeters 距离
   */
  move(distanceInMeters = 45) {
    console.log('Galloping...');
    super.move(distanceInMeters);
  }
}

export { Snake, Horse };

4.配置@src

修改@src资源路径引用,在tsconfig.json中配置

image.png

但是发现用来@src引用资源路径后,typedoc生成文档会报错

安装使用typedoc

1.install-typedoc

yarn add -D typedoc

image.png

2.编写脚步命令

在package.json中编写执行脚步命令

  "scripts": {
    "typedoc": "npx typedoc --tsconfig typedoc.json"
  }

3.编写typedoc.json

typedoc官方文档 typedoc.org/guides/inst… 详细说明了配置和API。我们这里跳过命令行运行,直接进入json配置文件,因为在项目中.json配置文件是必须的。

{
  // 输入选项 - 入口文件/文件夹
  "entryPoints": [
    "src/modules"
  ],
  // 输入选项 - 排除文件/文件夹
  "exclude": [
    "node_moudles",
    "src/modules/WebViewer/**/*.ts"
  ],
  // 输出选项 - 将软件包package.json中的版本version添加到项目名称中
  "includeVersion": true,
  // 输出选项 - 设置将在模板标题中使用的项目的名称。默认为package.json中的name
  "name": "测试title",
  // 输出选项 - 不在页面末尾打印TypeDoc链接
  "hideGenerator": true,
  // 输出选项 - 禁用描述代码位置
  "disableSources": true
}

4.执行npm run typedoc

在输出docs文件夹查看

image.png

持续更新...