ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

TypeDoc Example 详解:TypeScript 文档生成器官方示例项目的配置与文档注释实战

TypeDoc Example 详解:TypeScript 文档生成器官方示例项目的配置与文档注释实战 开发工具文档【免费下载链接】typedocDocumentation generator for TypeScript projects.项目地址https://gitcode.com/gh_mirrors/ty/typedoc点击查看免费下载本文以 TypeDoc 官方示例项目example/目录为主体完整继承该示例 README 中的功能索引与示例组织方式并结合示例工程的 TypeDoc 配置文件、package.json 脚本 与example/src/下的真实源码讲解如何从零构建一个 TypeDoc 文档站点包括构建命令、配置项逐项解读、文档注释doc comment的各种写法模式以及各类 TypeScript 语言结构在文档中的呈现效果。读完后你将掌握一套可直接复制到自己 TypeScript 项目中的文档工程化方案。一、示例项目定位TypeDoc 能做什么example/README.md 开篇即给出 TypeDoc 的核心定位它是 TypeScript 项目的文档生成器自动为项目中导出的每一个变量、函数和类生成文档。开发者再通过 doc comment文档注释为 API 补充解释与示例。README 中给出的标准 doc comment 写法是/** * Calculates the square root of a number. * * param x the number to calculate the root of. * returns the square root if x is non-negative or NaN if x is negative. */ export function sqrt(x: number): number { return Math.sqrt(x); }这段代码同时也是示例工程的真实源码见 example/src/functions.ts是理解 TypeDoc “摘要 参数 返回值”三段式文档注释的最小完整样本。README 还明确列出了示例项目重点演示的三项能力对多种 TypeScript 语言结构的内建支持内建语法构造支持doc comment 中的 Markdown 排版代码块中的语法高亮。二、构建示例站点五步命令流程构建步骤完整记录在 example/building-the-example.md 中共五步在仓库根目录构建 TypeDoc执行pnpm install和pnpm build进入示例目录cd example在示例目录执行pnpm install示例有独立的 package.json类型检查示例代码pnpm tsc生成文档pnpm typedoc。示例工程 package.json 中定义了三个 script其中文档生成命令为scripts: { lint: eslint ., tsc: tsc, typedoc: node ../bin/typedoc }typedoc脚本直接调用仓库根目录构建产物../bin/typedoc说明该示例是配合 TypeDoc 源码一起开发的。依赖列表中包含了lodash、react、react-dom及对应types包——这正对应了 README 功能索引中“以别名重新导出外部函数”lodash与“React 组件”react两类示例的存在前提。配套的 example/tsconfig.json 采用ESNext目标与模块、strict: true、noEmit: true、jsx: react-jsx和experimentalDecorators: true等编译选项文档生成依赖 TypeScript 语言服务做语义分析因此一份能通过类型检查的 tsconfig 是生成准确文档的前提。三、配置解析example/typedoc.json 逐项解读example/typedoc.json 是一份可直接借鉴的生产级配置其全部字段如下{ $schema: https://typedoc.org/schema.json, name: TypeDoc Example, entryPoints: [./src], sort: [source-order], categorizeByGroup: false, searchCategoryBoosts: { Component: 2, Model: 1.2 }, searchGroupBoosts: { Classes: 1.5 }, hostedBaseUrl: https://typedoc.org/example/, navigationLinks: { Docs: https://typedoc.org, API: https://typedoc.org/api/index.html, GitHub: https://github.com/TypeStrong/typedoc }, highlightLanguages: [ typescript, tsx, css, json, jsonc, python, yaml, markdown ], markdownItOptions: { html: true }, suppressCommentWarningsInDeclarationFiles: true }各字段的作用说明配置项取值说明nameTypeDoc Example文档站点显示的项目名称entryPoints[./src]文档入口指向整个src目录TypeDoc 会自动追踪入口内所有导出符号sort[source-order]按源码声明顺序而非字母序排列成员与阅读代码的习惯一致categorizeByGroupfalse关闭“按group标签归类页面”的行为全部导出集中在 Exports 列表中searchCategoryBoostsComponent: 2, Model: 1.2站内搜索时按category分类加权排序数值越大越靠前searchGroupBoostsClasses: 1.5站内搜索时按成员分组如 Classes、Functions加权hostedBaseUrl示例站点托管地址用于生成绝对 URL如 sitemap、分享链接navigationLinksDocs / API / GitHub 三个导航项在侧边栏渲染的额外导航链接highlightLanguagests、tsx、css、json、jsonc、python、yaml、markdown扩展 doc comment 代码块支持高亮的语言列表markdownItOptions.htmltrue允许 Markdown 中嵌入原始 HTMLsuppressCommentWarningsInDeclarationFilestrue抑制.d.ts声明文件中缺失文档注释的警告其中entryPoints指向./src后入口文件 example/src/index.ts 承担了“总装”角色/** * packageDocumentation * categoryDescription Component * React Components -- This description is added with the categoryDescription tag * on the entry point in src/index.ts * * document documents/external-markdown.md * document documents/markdown.md * document documents/syntax-highlighting.md * document documents/include.md */ export * from ./classes; export * from ./enums; export * from ./functions; export * from ./internals; export * from ./reactComponents; export * from ./reexports; export * from ./types; export * from ./variables;这个入口注释集中展示了三个文档组织标签packageDocumentation提供包级说明categoryDescription为Component分类对应配置中的searchCategoryBoosts.Component补充分类描述四个document标签把 src/documents/ 下的外部 Markdown 文档外部 Markdown 页、Markdown 排版展示页、语法高亮展示页、include 演示页挂载进站点。document引用的四个文档文件分别位于 external-markdown.md、markdown.md、syntax-highlighting.md 和 include.md。四、README 功能索引示例覆盖的七类场景README 的“Index of Examples”指出点击侧边栏的Exports链接可查看包内全部导出。在此之上官方特意高亮了以下七类示例这也是本文后续结合源码逐一剖析的骨架。1. 渲染Rendering外部 Markdown 文档external-markdown.mdMarkdown 排版展示markdown.md语法高亮展示syntax-highlighting.md这三类演示 doc comment 与外部 Markdown 的渲染能力其中语法高亮依赖配置中的highlightLanguages白名单。2. 函数Functions场景示例符号对应源码简单函数sqrt、sqrtArrowFunctionfunctions.ts泛型函数concatfunctions.ts接收 options 对象的函数makeHttpCallA、makeHttpCallBfunctions.ts重载函数overloadedFunctionfunctions.ts以别名导出的外部函数lodashSortByreexports.ts从源码中可以提炼出若干实用的文档注释模式箭头函数自动识别为函数sqrtArrowFunction用const声明箭头函数TypeDoc 会智能地将其按“函数”而非“变量”生成文档见 functions.ts 的注释说明。泛型参数用typeParam标注concatT通过typeParam T the element type of the arrays为类型参数补充说明。options 对象两种写法makeHttpCallA的选项类型定义为独立 interfaceMakeHttpCallAOptions源码注释特别提醒“使用这种模式时务必导出 options 类型否则 TypeDoc 不会为它生成文档”makeHttpCallB则把对象类型直接内联在参数位置。两种写法 TypeDoc 都能渲染出带文档注释的属性表格。重载签名overloadedFunction声明了两组重载number版与string版加一个实现签名站点上可以切换查看不同重载且实现签名本身不进入文档——只有当某个重载没有 doc comment 时TypeDoc 才会从实现签名复制注释。重导出reexports.ts 中一行export { sortBy as lodashSortBy } from lodash演示了第三方库函数改名为本地别名后再导出的文档化方式。3. 类型Types类型别名SimpleTypeAlias与ComplexGenericTypeAlias接口User与AdminUser对应源码 example/src/types.ts 中有三个值得注意的点User接口演示了嵌套类型定义上的 doc comment——name属性内部的first/last字段各自带注释AdminUser extends User演示了继承层级站点会自动展示继承关系以及每个属性最初定义于哪个接口ComplexGenericTypeAliasT是一个联合类型别名覆盖T、T[]、PromiseT、PromiseT[]与Recordstring, PromiseT五种形态用于验证复杂泛型联合类型的渲染。4. 类Classes基础类CustomerCustomer.ts子类DeliveryCustomer复杂类CancellablePromise继承内建泛型类型的类StringArrayStringArray.ts其中 CancellablePromise.ts 是全文档最复杂的示例类展示了复杂方法签名、静态方法resolve/reject/all/allSettled/race/delay、以及static all上一个多达 10 组重载签名的方法。它的类级注释还演示了两个组织类标签typeParam T what the CancellablePromise resolves to为类型参数T补充说明groupDescription Methods ...为隐式生成的Methods分组添加描述该描述会出现在列示分组的索引页注释中同时说明groupDescription对group手动创建的分组和隐式分组均有效。此外类中protected readonly promise属性演示了受保护成员的展示cancel的注释说明“在promise已 resolved 之后调用cancel必须是 no-op”——参数与行为约束直接写进 doc comment 是 TypeDoc 推荐的 API 契约表达方式。5. 枚举Enumsexample/src/enums.ts 覆盖三种枚举形态基础枚举SimpleEnum成员逐一写 doc comment如Pending表示订单已下单未处理混合了自动递增数值成员与显式字符串值成员Complete COMPLETE含计算成员的CrazyEnum注释明确说明“TypeDoc 不会显示计算成员的取值因为该信息只在运行时可得”类枚举对象EnumLikeObject以及数值版的EnumLikeObjectNumValues演示用as const对象模拟枚举的流行写法并展示如何用enum标签让 TypeDoc 把这类对象按枚举渲染。6. 变量VariablesPI、STRING_CONSTANT、ObjectConstant三个常量覆盖了数字、字符串、对象字面量等常见常量形态源码位于 example/src/variables.ts。7. React 组件React Components基础组件CardA、CardB复杂组件EasyFormDialog与EasyFormDialogProps源码位于 example/src/reactComponents.tsx。React 组件的 props 类型如EasyFormDialogProps是文档化的重点配合入口index.ts上的categoryDescription Component组件类在站点导航中会被归入Component分类并享受searchCategoryBoosts中权重 2 的搜索加权。五、把这套实践搬到自己的项目综合上述示例工程一个可直接套用的最小落地流程是在项目中创建typedoc.json至少指定entryPoints指向导出 API 的目录参考 example/typedoc.json 中的./src入口文件中用packageDocumentation写包级说明按需使用document挂载外部 Markdown 文档遵循三段式 doc comment摘要 /param/returns泛型加typeParam类成员分组需要时用groupgroupDescription采用 options-object 参数风格时把 options 类型单独定义为接口并导出确保 TypeDoc 能收集到该类型的文档需要类枚举enum-like object时加enum标签按需配置highlightLanguages、sort、searchCategoryBoosts等调优项运行typedoc示例中为pnpm typedoc即node ../bin/typedoc生成站点通过侧边栏Exports链接核对导出清单的完整性。小结example/目录是 TypeDoc 官方维护的“活文档”它既是一份功能索引README 的七类示例又是一套真实可构建的 TypeDoc 配置与注释规范样板typedoc.json、index.ts、functions.ts、enums.ts、CancellablePromise.ts。按照 building-the-example.md 的五步流程构建后即可对照本文逐节验证每种 TypeScript 构造与文档标签在最终站点中的呈现效果作为自己项目文档化方案的设计参照。赞分享开发工具文档【免费下载链接】typedocDocumentation generator for TypeScript projects.项目地址https://gitcode.com/gh_mirrors/ty/typedoc点击查看免费下载相关推荐TypeDoc项目详解从TypeScript代码生成专业文档的利器TypeDoc项目详解从TypeScript代码生成专业文档的利器 什么是TypeDoc TypeDoc是一个强大的文档生成工具专门为TypeScript项开发工具文档TypeDoc 实战指南从安装、零配置运行到完整配置 TypeScript API 文档生成器TypeDoc 实战指南从安装、零配置运行到完整配置 TypeScript API 文档生成器 TypeDoc 是面向 TypeScript 项目的 API开发工具文档DLSS Swapper安装教程免费切换DLSS版本3步完成第一次替换DLSS Swapper安装教程免费切换DLSS版本3步完成第一次替换 DLSS Swapper是一款免费的开源工具核心功能只有一个替换游戏里的DLSS桌面应用上一篇Playnite终极指南免费游戏库管理器一键整合20平台游戏下一篇OpenCore Simplify3步完成黑苹果自动化EFI配置的完整指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表