使用jsDoc的@readonly可标注只读属性以提升开发体验,但需结合Object.defineProperty设置writable为false才能实现运行时保护,typescript的readonly关键字则能在编译阶段阻止修改,提供更强的类型检查。

在javaScript中,给对象属性设置只读特性通常依赖于 Object.defineProperty 或 TypeScript 的类型系统。但如果你是在使用支持 JS Doc 注解(JSDoc)的纯 javascript 项目中,可以通过 JSDoc 注解来标注某个属性为只读,帮助开发工具(如 vs code)提供智能提示和类型检查。
@readonly 注解:标记只读属性
JSDoc 提供了 @readonly 标签,用于说明某个属性不应被修改。它不会强制运行时保护,但能提升代码可读性和编辑器支持。
基本语法:
/** * @typedef {Object} User * @property {String} name – 用户名 * @readonly * @property {string} id – 用户ID,只读 */
使用示例:
/** @type {User} */ const user = { name: ‘Alice’, id: ‘12345’ };
user.id = ‘67890’; // 编辑器会警告:尝试修改只读属性
虽然 JS 运行时不会阻止赋值(除非属性实际设为不可写),但像 VS Code 这类工具会根据注解提示开发者该属性应被视为只读。
结合 Object.defineProperty 实现真正的只读
若要真正防止属性被修改,需结合 Object.defineProperty 将 writable 设为 false。
示例:
const user = {};
Object.defineProperty(user, ‘id’, { value: ‘12345’, writable: false, enumerable: true, configurable: false });
user.id = ‘67890’; // 严格模式下报错:Cannot assign to read only property
此时配合 JSDoc 注解,语义更完整:
/** * @typedef {Object} Config * @property {string} version * @readonly * @property {string} apiEndpoint */
TypeScript 中的 readonly 更强大
如果项目使用 TypeScript,可以直接用 readonly 关键字定义只读属性:
Interface User { readonly id: string; name: string; }
const user: User = { id: ‘123’, name: ‘Bob’ }; user.id = ‘456’; // 编译时报错
TypeScript 在编译阶段就阻止对只读属性的赋值,比 JSDoc 更严格。
基本上就这些。JSDoc 的 @readonly 是一种文档层面的标注,适合在纯 JS 项目中提示属性不应被修改;如需运行时保护,仍需使用 Object.defineProperty。两者结合,既能提升协作效率,也能增强代码健壮性。