题记

如果你需要快速给你的typescript项目生成一个技术文档，或者希望自己的项目更好理解、检查自己项目的规范性等等，请往下看。

这是生成的效果。我们将用到一个工具库：typedoc。

项目地址：typedoc.org/guides/over…

如何使用

官网的说明可能不够清晰，又或者是我理解没到位。我这边补充几个使用注意点。

1.安装

建议搭建直接安装到全局，毕竟一般大家都不止一个项目。

npm install typedoc --save-dev -g

2.使用

1.方式一：直接调用命令

直接在项目目录调用指令即可生成，其中[src/indx.ts]是入口文件[--out doc]是指定输出目录。 但这种方式个人不太喜欢。我毕竟喜欢方式二。

typedoc --out doc  src/index.ts

2.方式二：

在项目根目录新建文件typedoc.json,在里面配置后，然后直接调用命令typedoc即可。

//typedoc.json
{
    // Comments are supported, like tsconfig.json
    "entryPoints": [
        "src/renderer/editor/index.ts",
        "src/renderer/config/index.ts",
        "src/renderer/building/index.ts",
        "src/renderer/core/index.ts",
        "src/renderer/core/animation/index.ts",
        "src/renderer/core/data-define/index.ts",
        "src/renderer/core/manual/index.ts",
        "src/renderer/core/node/index.ts",
        "src/renderer/engine/buluke-scene.ts",
        "src/renderer/service/index.ts",
        "src/renderer/service/res-info/index.ts",
        "src/renderer/service/typing.d.ts",
        "src/shared/i18n/index.ts",
        //pages
        "src/renderer/pages/app.tsx",
        "src/renderer/pages/dialog/index.tsx",
        "src/renderer/pages/context-menus/index.tsx",
        "src/renderer/pages/components/index.tsx",
        "src/renderer/components/index.tsx"
    ],
    "out": "doc"
}

这边可以看到我的入口文件放了很多个，其中每个入口文件都对应生成后文档的一级目录。那一级目录中的二级目录是什么呢？其实是那个入口文件中的所有 export 导出的东西。

也就是：所有入口文件中的 export都会到生成的文档中

访问

生成后的目录接口长这样，我们可以把他部署到一个静态服务器上，也可以内部自己在项目中用浏览器打开即可。

补充

文档的生成依赖于项目中的注释。当然如果项目没有这些注释也是可以生成的，如果有的还生成的更好看而且内容也更完善。可以自行参考。

主题

如果觉得样式不好看的可以，下载主题使用。

官方罗列了好几种主题，可以自行甄选。也可以自己开发一个好看的主题。

Bye～