装饰器以函数形式为类属性添加注解，需TypeScript启用experimentalDecorators或使用Babel；常见于数据验证、响应式、序列化和依赖注入，如MobX的@observable；结合reflect-metadata可存储额外元数据，适用于配置框架或ORM，但提案尚处Stage 3，生产环境需谨慎。
在JavaScript中，并没有像Java那样的“注解”（Annotation）语法，但随着TypeScript的普及以及ES装饰器提案的发展，“注解”这一概念逐渐以装饰器（Decorator）的形式被引入到JS类属性的标注中。下面介绍如何在JS/TS中为类属性添加注解，以及常见使用场景。
装饰器简介与启用条件
装饰器是一种特殊类型的声明，可以被附加到类、方法、访问器、属性或参数上，用于修改类的行为。要使用装饰器标注类属性，需满足以下条件：
- 使用TypeScript，且在tsconfig.json中启用
experimentalDecorators: true - 或使用支持装饰器的JavaScript环境（如Babel转译）
装饰器本质上是一个函数，接收目标对象、属性名和属性描述符作为参数。
属性装饰器的基本写法
属性装饰器定义方式如下：
function MyPropertyDecorator(target: any, propertyKey: string) {
console.log(`属性 ${propertyKey} 被装饰了`);
}
class MyClass {
@MyPropertyDecorator
myProperty: string = 'hello';
}
上面代码中，@MyPropertyDecorator作用于myProperty，在类定义时自动执行装饰器函数。
常见使用场景
属性装饰器在实际开发中常用于以下用途：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 数据验证：标注某个属性必须符合特定格式（如邮箱、非空），在赋值时进行校验
-
响应式系统：如Vue 3以前的装饰器版本或MobX中，用
@observable标记属性为可观察 - 序列化控制：标记某些属性不参与JSON序列化或指定别名
- 依赖注入：在框架中通过装饰器自动注入服务实例
例如，使用MobX：
class TodoStore {
@observable
todos = [];
@action
addTodo(item) {
this.todos.push(item);
}
}
这里@observable就是对属性的注解，使其具备响应式能力。
结合元数据使用（reflect-metadata）
若想让装饰器存储更多信息，可配合reflect-metadata包使用：
import 'reflect-metadata';
function DefaultValue(value: any) {
return (target: any, propertyKey: string) => {
Reflect.defineMetadata('default', value, target, propertyKey);
};
}
class Config {
@DefaultValue('en-US')
language: string;
}
// 后续可通过 Reflect.getMetadata 获取元数据
这种方式适合构建配置化框架或ORM映射。
基本上就这些。虽然原生JS还不支持注解，但通过TypeScript装饰器，我们已经能实现类似功能，尤其在框架开发中非常实用。注意装饰器目前仍是Stage 3提案，生产环境使用需谨慎评估兼容性。
