TypeDoc 基本使用 #
注释基础 #
TypeDoc 使用 JSDoc 风格的注释来提取文档信息。理解注释的基本结构是编写高质量文档的第一步。
注释语法 #
typescript
/**
* 这是一个文档注释
* 可以跨越多行
*
* 第一段是简短描述
* 后续段落是详细描述
*/
// 普通注释不会被 TypeDoc 提取
// 这只是代码注释
/*
* 这种注释也不会被提取
*/
注释结构 #
text
┌─────────────────────────────────────────────────────────────┐
│ 文档注释结构 │
├─────────────────────────────────────────────────────────────┤
│ │
│ /** │
│ * 简短描述(第一段) │
│ * │
│ * 详细描述(后续段落) │
│ * 可以包含更多说明、注意事项等 │
│ * │
│ * @param name - 参数标签 │
│ * @returns 返回值标签 │
│ * @example 示例标签 │
│ */ │
│ │
└─────────────────────────────────────────────────────────────┘
函数文档 #
基本函数注释 #
typescript
/**
* 计算两个数的和
* @param a - 第一个加数
* @param b - 第二个加数
* @returns 两数之和
*/
function add(a: number, b: number): number {
return a + b;
}
带详细描述的函数 #
typescript
/**
* 格式化日期为指定格式
*
* 将日期对象转换为字符串,支持多种格式化选项。
* 默认格式为 'YYYY-MM-DD'。
*
* @param date - 要格式化的日期对象
* @param format - 格式化模式,默认为 'YYYY-MM-DD'
* @returns 格式化后的日期字符串
*
* @example
* ```typescript
* formatDate(new Date()); // '2024-01-15'
* formatDate(new Date(), 'YYYY/MM/DD'); // '2024/01/15'
* formatDate(new Date(), 'MM-DD-YYYY'); // '01-15-2024'
* ```
*/
function formatDate(
date: Date,
format: string = 'YYYY-MM-DD'
): string {
// 实现...
}
多参数函数 #
typescript
/**
* 创建用户对象
*
* @param id - 用户唯一标识
* @param name - 用户名称
* @param options - 可选配置项
* @param options.email - 邮箱地址
* @param options.age - 用户年龄
* @param options.role - 用户角色
* @returns 完整的用户对象
*
* @example
* ```typescript
* const user = createUser(1, 'John', {
* email: 'john@example.com',
* role: 'admin'
* });
* ```
*/
function createUser(
id: number,
name: string,
options?: {
email?: string;
age?: number;
role?: 'user' | 'admin';
}
): User {
return {
id,
name,
...options
};
}
泛型函数 #
typescript
/**
* 获取对象中指定键的值
*
* @typeParam T - 对象类型
* @typeParam K - 键类型,必须是 T 的键
* @param obj - 源对象
* @param key - 要获取的键
* @returns 键对应的值
*
* @example
* ```typescript
* const user = { name: 'John', age: 30 };
* const name = getProperty(user, 'name'); // 'John'
* ```
*/
function getProperty<T, K extends keyof T>(
obj: T,
key: K
): T[K] {
return obj[key];
}
异步函数 #
typescript
/**
* 异步获取用户数据
*
* 从服务器获取指定用户的信息。
* 如果用户不存在,抛出 NotFoundError。
*
* @param userId - 用户ID
* @returns 用户数据对象
* @throws {NotFoundError} 用户不存在时抛出
* @throws {NetworkError} 网络错误时抛出
*
* @example
* ```typescript
* try {
* const user = await fetchUser(123);
* console.log(user.name);
* } catch (error) {
* console.error('获取用户失败', error);
* }
* ```
*/
async function fetchUser(userId: number): Promise<User> {
const response = await fetch(`/api/users/${userId}`);
if (!response.ok) {
throw new NotFoundError(`User ${userId} not found`);
}
return response.json();
}
类文档 #
基本类注释 #
typescript
/**
* 表示一个点在二维坐标系中的位置
*/
class Point {
/**
* X 坐标
*/
x: number;
/**
* Y 坐标
*/
y: number;
/**
* 创建一个新的点
* @param x - X 坐标,默认为 0
* @param y - Y 坐标,默认为 0
*/
constructor(x: number = 0, y: number = 0) {
this.x = x;
this.y = y;
}
/**
* 计算到原点的距离
* @returns 到原点的距离
*/
distanceFromOrigin(): number {
return Math.sqrt(this.x ** 2 + this.y ** 2);
}
}
完整的类文档 #
typescript
/**
* 用户管理服务
*
* 提供用户的增删改查操作,支持本地存储和远程同步。
*
* @example
* ```typescript
* const service = new UserService();
*
* // 添加用户
* const user = service.add({ name: 'John' });
*
* // 获取用户
* const found = service.get(user.id);
*
* // 删除用户
* service.remove(user.id);
* ```
*/
class UserService {
/**
* 用户列表
* @internal 内部使用
*/
private users: Map<number, User> = new Map();
/**
* 下一个用户ID
*/
private nextId: number = 1;
/**
* 创建用户服务实例
* @param options - 配置选项
*/
constructor(
private options: UserServiceOptions = {}
) {}
/**
* 添加新用户
*
* @param data - 用户数据
* @returns 创建的用户对象
*
* @example
* ```typescript
* const user = service.add({
* name: 'John',
* email: 'john@example.com'
* });
* ```
*/
add(data: Omit<User, 'id'>): User {
const user: User = {
id: this.nextId++,
...data
};
this.users.set(user.id, user);
return user;
}
/**
* 根据ID获取用户
*
* @param id - 用户ID
* @returns 用户对象,不存在则返回 undefined
*/
get(id: number): User | undefined {
return this.users.get(id);
}
/**
* 获取所有用户
*
* @returns 用户列表
*/
getAll(): User[] {
return Array.from(this.users.values());
}
/**
* 更新用户信息
*
* @param id - 用户ID
* @param data - 要更新的数据
* @returns 更新后的用户对象
* @throws {Error} 用户不存在时抛出
*/
update(id: number, data: Partial<Omit<User, 'id'>>): User {
const user = this.users.get(id);
if (!user) {
throw new Error(`User ${id} not found`);
}
Object.assign(user, data);
return user;
}
/**
* 删除用户
*
* @param id - 用户ID
* @returns 是否删除成功
*/
remove(id: number): boolean {
return this.users.delete(id);
}
}
抽象类 #
typescript
/**
* 数据存储基类
*
* 定义了数据存储的通用接口,子类需要实现具体的存储逻辑。
*
* @typeParam T - 存储的数据类型
*/
abstract class Storage<T> {
/**
* 存储名称
*/
abstract readonly name: string;
/**
* 保存数据
* @param data - 要保存的数据
*/
abstract save(data: T): Promise<void>;
/**
* 加载数据
* @returns 加载的数据
*/
abstract load(): Promise<T>;
/**
* 清除数据
*/
abstract clear(): Promise<void>;
}
/**
* 本地存储实现
*
* @typeParam T - 存储的数据类型
*/
class LocalStorage<T> extends Storage<T> {
readonly name: string;
constructor(name: string) {
super();
this.name = name;
}
async save(data: T): Promise<void> {
localStorage.setItem(this.name, JSON.stringify(data));
}
async load(): Promise<T> {
const data = localStorage.getItem(this.name);
return data ? JSON.parse(data) : null;
}
async clear(): Promise<void> {
localStorage.removeItem(this.name);
}
}
接口文档 #
基本接口 #
typescript
/**
* 用户信息接口
*/
interface User {
/** 用户唯一标识 */
id: number;
/** 用户名 */
name: string;
/** 邮箱地址 */
email: string;
/** 用户年龄 */
age?: number;
}
复杂接口 #
typescript
/**
* API 响应结构
*
* @typeParam T - 响应数据类型
*/
interface ApiResponse<T> {
/** 响应状态码 */
code: number;
/** 响应消息 */
message: string;
/** 响应数据 */
data: T;
/** 时间戳 */
timestamp: number;
}
/**
* 分页响应结构
*
* @typeParam T - 列表项类型
*/
interface PaginatedResponse<T> extends ApiResponse<T[]> {
/** 分页信息 */
pagination: {
/** 当前页码 */
page: number;
/** 每页数量 */
pageSize: number;
/** 总数量 */
total: number;
/** 总页数 */
totalPages: number;
};
}
函数类型接口 #
typescript
/**
* 事件处理函数类型
*/
interface EventHandler<T = void> {
/**
* 处理事件
* @param event - 事件对象
*/
(event: T): void;
}
/**
* 比较函数类型
*
* @typeParam T - 比较元素类型
*/
interface CompareFunction<T> {
/**
* 比较两个元素
* @param a - 第一个元素
* @param b - 第二个元素
* @returns 负数表示 a < b,正数表示 a > b,0 表示相等
*/
(a: T, b: T): number;
}
类型别名文档 #
基本类型别名 #
typescript
/**
* 用户ID类型
*/
type UserId = number;
/**
* 用户角色类型
*/
type UserRole = 'user' | 'admin' | 'guest';
/**
* 可能是字符串或数字
*/
type StringOrNumber = string | number;
复杂类型别名 #
typescript
/**
* 深度部分类型
*
* 递归地将所有属性变为可选
*
* @typeParam T - 原始类型
*/
type DeepPartial<T> = {
[P in keyof T]?: T[P] extends object
? DeepPartial<T[P]>
: T[P];
};
/**
* 必选键类型
*
* 从 T 中选取必须包含的键 K
*
* @typeParam T - 对象类型
* @typeParam K - 必选键
*/
type RequiredKeys<T, K extends keyof T> = T & Required<Pick<T, K>>;
/**
* 函数返回类型提取
*
* @typeParam T - 函数类型
*/
type AsyncReturnType<T extends (...args: any) => Promise<any>> =
T extends (...args: any) => Promise<infer R> ? R : never;
枚举文档 #
基本枚举 #
typescript
/**
* 用户状态枚举
*/
enum UserStatus {
/** 活跃状态 */
Active = 'active',
/** 未激活状态 */
Inactive = 'inactive',
/** 已禁用状态 */
Disabled = 'disabled',
/** 已删除状态 */
Deleted = 'deleted'
}
数字枚举 #
typescript
/**
* HTTP 状态码
*/
enum HttpStatus {
/** 成功 */
OK = 200,
/** 已创建 */
Created = 201,
/** 错误请求 */
BadRequest = 400,
/** 未授权 */
Unauthorized = 401,
/** 禁止访问 */
Forbidden = 403,
/** 未找到 */
NotFound = 404,
/** 服务器错误 */
InternalServerError = 500
}
模块文档 #
模块级别注释 #
typescript
/**
* @module UserService
*
* 用户服务模块,提供用户管理相关的功能。
*
* @example
* ```typescript
* import { UserService, User } from './user-service';
*
* const service = new UserService();
* const user = service.add({ name: 'John' });
* ```
*/
/**
* @packageDocumentation
*
* 整个包的文档说明。
* 这将作为包的主页面内容。
*/
导出文档 #
typescript
/**
* 工具函数模块
*/
/**
* 深拷贝对象
*
* @param obj - 要拷贝的对象
* @returns 深拷贝后的新对象
*/
export function deepClone<T>(obj: T): T {
return JSON.parse(JSON.stringify(obj));
}
/**
* 防抖函数
*
* @param fn - 要防抖的函数
* @param delay - 延迟时间(毫秒)
* @returns 防抖后的函数
*/
export function debounce<T extends (...args: any[]) => any>(
fn: T,
delay: number
): (...args: Parameters<T>) => void {
let timer: ReturnType<typeof setTimeout>;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}
export { deepClone, debounce };
最佳实践 #
1. 保持简洁 #
typescript
// ✅ 好的注释:简洁明了
/** 计算两数之和 */
function add(a: number, b: number): number {
return a + b;
}
// ❌ 不好的注释:过于冗长
/**
* 这个函数用于计算两个数字的和。
* 它接受两个参数,都是数字类型,
* 然后返回它们的和。
* 这是一个非常简单的数学运算。
*/
function add(a: number, b: number): number {
return a + b;
}
2. 提供有价值的示例 #
typescript
// ✅ 好的示例:展示实际用法
/**
* 格式化货币金额
*
* @param amount - 金额
* @param currency - 货币代码,默认 'USD'
* @returns 格式化后的货币字符串
*
* @example
* ```typescript
* formatCurrency(1234.56); // '$1,234.56'
* formatCurrency(1234.56, 'EUR'); // '€1,234.56'
* formatCurrency(1234.56, 'JPY'); // '¥1,235'
* ```
*/
function formatCurrency(
amount: number,
currency: string = 'USD'
): string {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency
}).format(amount);
}
3. 说明边界情况 #
typescript
/**
* 安全获取嵌套属性
*
* @param obj - 源对象
* @param path - 属性路径,用点号分隔
* @param defaultValue - 默认值
* @returns 属性值或默认值
*
* @example
* ```typescript
* const obj = { a: { b: { c: 1 } } };
* get(obj, 'a.b.c'); // 1
* get(obj, 'a.b.d', 'default'); // 'default'
* get(null, 'a.b.c'); // undefined
* ```
*/
function get<T = any>(
obj: any,
path: string,
defaultValue?: T
): T | undefined {
if (!obj) return defaultValue;
const keys = path.split('.');
let result = obj;
for (const key of keys) {
if (result[key] === undefined) {
return defaultValue;
}
result = result[key];
}
return result;
}
4. 使用 @see 关联相关内容 #
typescript
/**
* 用户服务
*
* 提供用户的增删改查操作。
*
* @see {@link User} 用户类型定义
* @see {@link UserServiceOptions} 服务配置选项
* @see {@link https://example.com/api/users | API 文档}
*/
class UserService {
// ...
}
5. 标注弃用信息 #
typescript
/**
* 旧版用户获取方法
*
* @deprecated 请使用 {@link UserService.get} 替代
* 该方法将在 v2.0.0 版本移除
*
* @param id - 用户ID
* @returns 用户对象
*/
function getUserLegacy(id: number): User | undefined {
console.warn('getUserLegacy is deprecated, use UserService.get instead');
return userService.get(id);
}
下一步 #
现在你已经掌握了 TypeDoc 的基本使用方法,接下来学习 配置详解,深入了解 TypeDoc 的各种配置选项!
最后更新:2026-03-29