JSDoc 常用标签 #
标签概述 #
JSDoc 提供了丰富的标签用于描述代码的不同方面。标签以 @ 符号开头,用于标识注释中的特定信息。
text
┌─────────────────────────────────────────────────────────────┐
│ JSDoc 标签分类 │
├─────────────────────────────────────────────────────────────┤
│ 描述标签:描述代码的功能和行为 │
│ 类型标签:定义变量、参数、返回值的类型 │
│ 作用域标签:定义代码的作用域和可见性 │
│ 继承标签:描述类之间的继承关系 │
│ 元数据标签:提供额外的元数据信息 │
└─────────────────────────────────────────────────────────────┘
描述标签 #
@description 描述标签 #
添加详细描述:
javascript
/**
* @description 计算两个数字的和
* 该函数接受两个数字参数,返回它们的和。
*/
function add(a, b) {
return a + b;
}
// 简写:描述文本直接写在注释开头
/**
* 计算两个数字的和
* 该函数接受两个数字参数,返回它们的和。
*/
function add(a, b) {
return a + b;
}
@summary 摘要标签 #
添加简短摘要:
javascript
/**
* @summary 计算两数之和
* @description 该函数接受两个数字参数,返回它们的和。
* 支持整数和浮点数运算。
*/
function add(a, b) {
return a + b;
}
@example 示例标签 #
添加使用示例:
javascript
/**
* 格式化日期
* @param {Date} date - 日期对象
* @param {string} format - 格式字符串
* @returns {string} 格式化后的字符串
* @example
* // 基本用法
* formatDate(new Date(), 'YYYY-MM-DD')
* // 返回 '2024-01-15'
*
* @example
* // 包含时间
* formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')
* // 返回 '2024-01-15 10:30:00'
*/
function formatDate(date, format) {
// ...
}
@see 参考标签 #
添加参考链接:
javascript
/**
* 发送 HTTP 请求
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API|Fetch API}
* @see {@link request} 相关方法
* @see module:utils/http
*/
function fetch(url) {
// ...
}
@deprecated 废弃标签 #
标记已废弃的代码:
javascript
/**
* @deprecated 自版本 2.0 起废弃,请使用 newMethod
* @see newMethod
*/
function oldMethod() {
// ...
}
/**
* @deprecated 使用 {@link newMethod} 代替
*/
function anotherOldMethod() {
// ...
}
@since 版本标签 #
标记添加版本:
javascript
/**
* @since 1.0.0
*/
function feature() {
// ...
}
/**
* @since 2.1.0
*/
function newFeature() {
// ...
}
类型标签 #
@type 类型标签 #
定义变量类型:
javascript
/**
* @type {string}
*/
let name = 'John';
/**
* @type {number[]}
*/
let scores = [90, 85, 95];
/**
* @type {Object<string, number>}
*/
let config = { timeout: 5000 };
/**
* @type {User | null}
*/
let currentUser = null;
@param 参数标签 #
描述函数参数:
javascript
// 基本用法
/**
* @param {string} name - 用户名
*/
function greet(name) {}
// 可选参数
/**
* @param {string} name - 用户名
* @param {number} [age] - 年龄(可选)
*/
function createUser(name, age) {}
// 默认值
/**
* @param {string} [name='Guest'] - 用户名
*/
function greet(name = 'Guest') {}
// 对象参数属性
/**
* @param {Object} user - 用户对象
* @param {string} user.name - 用户名
* @param {number} user.age - 年龄
*/
function saveUser(user) {}
// 解构参数
/**
* @param {Object} options - 配置选项
* @param {string} options.url - 请求地址
* @param {string} [options.method='GET'] - 请求方法
*/
function request({ url, method = 'GET' }) {}
// 剩余参数
/**
* @param {...number} numbers - 数字列表
*/
function sum(...numbers) {}
@returns 返回值标签 #
描述返回值:
javascript
// 基本用法
/**
* @returns {number} 两数之和
*/
function add(a, b) {
return a + b;
}
// 无返回值
/**
* @returns {void}
*/
function log(message) {
console.log(message);
}
// Promise 返回
/**
* @returns {Promise<User>} 用户 Promise
*/
async function fetchUser() {
// ...
}
// 复杂返回类型
/**
* @returns {{ name: string, age: number }} 用户信息
*/
function getUser() {
return { name: 'John', age: 25 };
}
@throws 异常标签 #
描述可能抛出的异常:
javascript
/**
* @throws {Error} 当除数为零时抛出
*/
function divide(a, b) {
if (b === 0) {
throw new Error('Division by zero');
}
return a / b;
}
/**
* @throws {TypeError} 参数类型错误
* @throws {RangeError} 参数超出范围
*/
function setAge(age) {
if (typeof age !== 'number') {
throw new TypeError('Age must be a number');
}
if (age < 0 || age > 150) {
throw new RangeError('Invalid age');
}
}
@typedef 类型定义标签 #
定义类型别名:
javascript
/**
* 用户类型
* @typedef {Object} User
* @property {number} id - 用户 ID
* @property {string} name - 用户名
* @property {string} email - 邮箱
* @property {string[]} [roles] - 角色列表
*/
/**
* @param {User} user - 用户对象
*/
function saveUser(user) {}
@property 属性标签 #
定义对象属性:
javascript
/**
* 配置对象
* @typedef {Object} Config
* @property {string} baseURL - 基础地址
* @property {number} [timeout=5000] - 超时时间
* @property {Object} [headers] - 请求头
*/
/**
* @type {Config}
*/
const config = {
baseURL: '/api',
timeout: 5000
};
@callback 回调标签 #
定义回调类型:
javascript
/**
* 请求回调函数
* @callback RequestCallback
* @param {Error|null} error - 错误对象
* @param {Object} [data] - 响应数据
* @returns {void}
*/
/**
* 发送请求
* @param {string} url - 请求地址
* @param {RequestCallback} callback - 回调函数
*/
function request(url, callback) {}
@template 泛型标签 #
定义泛型类型:
javascript
/**
* @template T
* @param {T} value - 输入值
* @returns {T} 返回相同类型
*/
function identity(value) {
return value;
}
/**
* @template T, U
* @param {T} first - 第一个值
* @param {U} second - 第二个值
* @returns {{ first: T, second: U }}
*/
function pair(first, second) {
return { first, second };
}
/**
* @template {Object} T - 必须是对象类型
* @param {T} obj - 对象参数
*/
function process(obj) {}
类和模块标签 #
@class 类标签 #
定义类:
javascript
/**
* 用户类
* @class
* @classdesc 表示系统中的用户
*/
class User {
// ...
}
/**
* @classdesc 类的详细描述
* 可以包含多行文本。
*/
class Config {
// ...
}
@constructor 构造函数标签 #
标记构造函数:
javascript
/**
* 用户类
* @class
*/
function User(name) {
/**
* @constructor
*/
this.name = name;
}
// ES6 类
class Person {
/**
* @constructor
* @param {string} name - 用户名
*/
constructor(name) {
this.name = name;
}
}
@extends 继承标签 #
描述继承关系:
javascript
/**
* 管理员用户
* @class
* @extends User
*/
class Admin extends User {
// ...
}
/**
* @extends {EventEmitter}
*/
class MyEmitter extends EventEmitter {
// ...
}
@implements 实现标签 #
描述接口实现:
javascript
/**
* @implements {IUserService}
*/
class UserService {
// ...
}
@interface 接口标签 #
定义接口:
javascript
/**
* 用户服务接口
* @interface IUserService
*/
/**
* 获取用户
* @function
* @name IUserService#getUser
* @param {number} id - 用户 ID
* @returns {Promise<User>}
*/
/**
* 保存用户
* @function
* @name IUserService#saveUser
* @param {User} user - 用户对象
* @returns {Promise<void>}
*/
@module 模块标签 #
定义模块:
javascript
/**
* HTTP 工具模块
* @module utils/http
*/
/**
* 用户服务模块
* @module UserService
*/
@namespace 命名空间标签 #
定义命名空间:
javascript
/**
* 工具函数集合
* @namespace
*/
const Utils = {
/**
* 格式化日期
* @memberof Utils
* @param {Date} date - 日期对象
* @returns {string}
*/
formatDate(date) {
// ...
}
};
@memberof 成员标签 #
指定所属对象:
javascript
/**
* @namespace Services
*/
/**
* 获取用户
* @function
* @memberof Services
* @param {number} id - 用户 ID
* @returns {User}
*/
function getUser(id) {
// ...
}
作用域标签 #
@public 公有标签 #
标记公有成员:
javascript
class User {
/**
* 用户名
* @public
* @type {string}
*/
name;
}
@private 私有标签 #
标记私有成员:
javascript
class User {
/**
* 内部 ID
* @private
* @type {string}
*/
#id;
/**
* @private
*/
_internalMethod() {}
}
@protected 保护标签 #
标记保护成员:
javascript
class User {
/**
* @protected
* @type {string}
*/
_email;
}
@static 静态标签 #
标记静态成员:
javascript
class User {
/**
* 默认角色
* @static
* @type {string}
*/
static DEFAULT_ROLE = 'user';
/**
* 创建用户
* @static
* @param {Object} data - 用户数据
* @returns {User}
*/
static create(data) {
return new User(data);
}
}
@instance 实例标签 #
标记实例成员:
javascript
/**
* @class
*/
function User() {
/**
* @instance
* @type {string}
*/
this.name = 'John';
}
@inner 内部标签 #
标记内部成员:
javascript
/**
* @module utils
*/
/**
* 内部辅助函数
* @inner
* @param {string} str - 输入字符串
* @returns {string}
*/
function helper(str) {
// ...
}
@global 全局标签 #
标记全局成员:
javascript
/**
* 全局配置
* @global
* @type {Object}
*/
var CONFIG = {};
功能标签 #
@function 函数标签 #
显式标记函数:
javascript
/**
* 处理函数
* @function
* @param {string} input - 输入
* @returns {string}
*/
const handler = (input) => input;
/**
* @function myFunction
*/
const myFunction = function() {};
@method 方法标签 #
标记方法:
javascript
class User {
/**
* 获取用户名
* @method
* @returns {string}
*/
getName() {
return this.name;
}
}
@constant 常量标签 #
标记常量:
javascript
/**
* API 基础地址
* @constant {string}
*/
const API_BASE_URL = 'https://api.example.com';
/**
* @const
* @type {number}
*/
const MAX_RETRIES = 3;
@readonly 只读标签 #
标记只读:
javascript
class User {
/**
* 用户 ID
* @type {string}
* @readonly
*/
id;
}
/**
* @type {string}
* @readonly
*/
const VERSION = '1.0.0';
@enum 枚举标签 #
定义枚举:
javascript
/**
* 用户状态枚举
* @enum {string}
* @readonly
*/
const Status = {
/** 活跃 */
ACTIVE: 'active',
/** 未激活 */
INACTIVE: 'inactive',
/** 已禁用 */
DISABLED: 'disabled'
};
/**
* @enum {number}
*/
const HttpStatus = {
OK: 200,
NOT_FOUND: 404,
SERVER_ERROR: 500
};
@default 默认值标签 #
标记默认值:
javascript
/**
* 超时时间
* @type {number}
* @default 5000
*/
let timeout = 5000;
/**
* @param {string} [name='Guest'] - 用户名
* @default 'Guest'
*/
function greet(name = 'Guest') {}
@fires 事件标签 #
描述触发的事件:
javascript
/**
* 用户登录
* @fires User#login
* @fires User#sessionStart
*/
function login(credentials) {
// ...
this.emit('login', user);
}
@listens 监听标签 #
描述监听的事件:
javascript
/**
* @listens User#login
* @listens User#logout
*/
function initUserHandlers() {
user.on('login', handleLogin);
user.on('logout', handleLogout);
}
@event 事件标签 #
定义事件:
javascript
/**
* 登录事件
* @event User#login
* @type {Object}
* @property {User} user - 用户对象
* @property {Date} timestamp - 时间戳
*/
/**
* @fires User#login
*/
function login() {
/**
* @event User#login
*/
this.emit('login', { user, timestamp: new Date() });
}
其他标签 #
@author 作者标签 #
标记作者:
javascript
/**
* @author John Doe <john@example.com>
* @author Jane Doe <jane@example.com>
*/
function myFunction() {}
@license 许可证标签 #
标记许可证:
javascript
/**
* @license MIT
*/
// 或
/**
* @license
* Copyright (c) 2024 John Doe
* MIT License
*/
@version 版本标签 #
标记版本:
javascript
/**
* @version 1.0.0
*/
function myFunction() {}
/**
* @version 2.0.0
* @since 1.0.0
*/
class MyClass {}
@ignore 忽略标签 #
忽略文档生成:
javascript
/**
* @ignore
*/
function internalHelper() {}
/**
* @private
* @ignore
*/
function _privateMethod() {}
@todo 待办标签 #
标记待办事项:
javascript
/**
* @todo 添加参数验证
* @todo 支持异步操作
*/
function processData(data) {}
@override 重写标签 #
标记重写方法:
javascript
class User {
/**
* @override
*/
toString() {
return `User: ${this.name}`;
}
}
@abstract 抽象标签 #
标记抽象方法:
javascript
class BaseUser {
/**
* 获取用户类型
* @abstract
* @returns {string}
*/
getType() {
throw new Error('Must implement getType()');
}
}
@virtual 虚拟标签 #
同 @abstract:
javascript
/**
* @virtual
*/
function mustImplement() {}
@external 外部标签 #
引用外部资源:
javascript
/**
* @external JSON
* @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON|JSON}
*/
/**
* 解析 JSON
* @function
* @see {@link external:JSON.parse}
*/
标签组合使用 #
完整函数文档 #
javascript
/**
* 发送 HTTP 请求
*
* @description 发送一个 HTTP 请求并返回响应数据
* @param {string} url - 请求地址
* @param {Object} [options] - 请求选项
* @param {string} [options.method='GET'] - 请求方法
* @param {Object} [options.headers] - 请求头
* @param {*} [options.body] - 请求体
* @param {number} [options.timeout=5000] - 超时时间
* @returns {Promise<Response>} 响应 Promise
* @throws {NetworkError} 网络错误时抛出
* @throws {TimeoutError} 请求超时时抛出
* @example
* // GET 请求
* request('/api/users')
* .then(data => console.log(data))
*
* @example
* // POST 请求
* request('/api/users', {
* method: 'POST',
* body: { name: 'John' }
* })
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API|Fetch API}
* @since 1.0.0
*/
async function request(url, options = {}) {
// ...
}
完整类文档 #
javascript
/**
* 用户管理类
*
* @class
* @classdesc 提供用户的增删改查功能
* @extends EventEmitter
* @fires User#created
* @fires User#updated
* @fires User#deleted
*
* @example
* const userManager = new UserManager();
* const user = await userManager.create({ name: 'John' });
*/
class UserManager extends EventEmitter {
/**
* 创建 UserManager 实例
* @constructor
* @param {Object} [config] - 配置选项
* @param {string} [config.apiBase='/api'] - API 基础地址
*/
constructor(config = {}) {
super();
/**
* API 基础地址
* @type {string}
* @readonly
*/
this.apiBase = config.apiBase || '/api';
/**
* 用户缓存
* @private
* @type {Map<number, User>}
*/
this._cache = new Map();
}
/**
* 创建用户
* @public
* @param {Object} data - 用户数据
* @returns {Promise<User>} 用户实例
* @fires User#created
* @since 1.0.0
*/
async create(data) {
// ...
}
/**
* 获取默认角色
* @static
* @returns {string} 默认角色
*/
static getDefaultRole() {
return 'user';
}
}
标签速查表 #
| 标签 | 用途 | 示例 |
|---|---|---|
| @param | 参数描述 | @param {string} name - 用户名 |
| @returns | 返回值描述 | @returns {number} 总和 |
| @type | 变量类型 | @type {string} |
| @typedef | 类型别名 | @typedef {Object} User |
| @property | 对象属性 | @property {string} name |
| @class | 类定义 | @class |
| @extends | 继承关系 | @extends User |
| @module | 模块定义 | @module utils |
| @example | 使用示例 | @example fn() |
| @throws | 异常描述 | @throws {Error} |
| @deprecated | 废弃标记 | @deprecated 使用 newFn |
| @see | 参考链接 | @see {@link url} |
| @private | 私有成员 | @private |
| @static | 静态成员 | @static |
| @readonly | 只读属性 | @readonly |
| @default | 默认值 | @default 0 |
| @enum | 枚举定义 | @enum {string} |
| @template | 泛型定义 | @template T |
| @callback | 回调类型 | @callback Handler |
下一步 #
现在你已经掌握了 JSDoc 常用标签,接下来学习 高级用法 了解更多高级技巧!
最后更新:2026-03-29