TypeScript中的装饰器是一种特殊类型的声明，它能够附加到类声明、方法、访问器、属性或参数上，用于在不修改原有代码结构的情况下添加额外的行为，这种特性直接丰富了JavaScript的元编程实现方式。
什么是JavaScript元编程
元编程指的是程序能够处理自身或者修改自身行为的能力，比如可以在运行时动态修改对象的结构、拦截属性的访问、给函数添加额外的执行逻辑等。在TypeScript装饰器出现之前，JavaScript实现元编程通常需要手动操作原型链、使用Proxy代理对象或者高阶函数包裹等方式，代码编写复杂度较高，可读性也相对较差。
TypeScript装饰器的核心类型
TypeScript支持的装饰器主要分为以下几类，不同类型的装饰器对应不同的元编程场景：
- 类装饰器：作用于类本身，可以修改类的构造函数或者替换类定义
- 方法装饰器：作用于类的原型方法，可以修改方法的执行逻辑或者添加额外的前置后置操作
- 属性装饰器：作用于类的属性，可以修改属性的描述符或者添加元数据
- 参数装饰器：作用于方法的参数，通常用于给参数添加元数据标记
装饰器如何提升元编程能力
简化元数据添加流程
传统JavaScript给类或者属性添加元数据，通常需要手动维护一个映射表来存储对应关系，而装饰器可以直接在声明阶段完成元数据的挂载，不需要额外的映射逻辑。
下面的示例展示了用属性装饰器给类的属性添加校验规则元数据：
// 定义存储元数据的容器
const metadataMap = new WeakMap<object, Map<string, any>>();
// 属性装饰器：添加校验规则
function ValidateRule(rule: string) {
return function (target: any, propertyKey: string) {
if (!metadataMap.has(target)) {
metadataMap.set(target, new Map());
}
const targetMetadata = metadataMap.get(target)!;
targetMetadata.set(propertyKey, rule);
};
}
class User {
@ValidateRule('required')
name: string;
@ValidateRule('min:6')
password: string;
constructor(name: string, password: string) {
this.name = name;
this.password = password;
}
}
// 获取元数据
function getValidateRules(target: object) {
return metadataMap.get(target) || new Map();
}
console.log(getValidateRules(User.prototype));
无侵入式扩展功能
装饰器可以在不修改原有类或方法代码的情况下，为其添加额外的功能，比如日志打印、性能统计、权限校验等，这种方式比直接修改原函数或者使用高阶函数包裹更符合开放封闭原则。
下面的示例用方法装饰器实现方法执行时间的统计：
// 方法装饰器：统计方法执行时间
function MeasureTime() {
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
const start = Date.now();
const result = originalMethod.apply(this, args);
const end = Date.now();
console.log(`方法${propertyKey}执行耗时：${end - start}ms`);
return result;
};
return descriptor;
};
}
class DataService {
@MeasureTime()
fetchData(url: string) {
// 模拟异步请求
const start = Date.now();
while (Date.now() - start < 100) {}
return `从${url}获取数据成功`;
}
}
const service = new DataService();
service.fetchData('http://ipipp.com/api/data');
统一处理类相关的通用逻辑
类装饰器可以直接修改类的构造函数，或者给类添加统一的原型方法，适合处理多个类需要共享的通用逻辑，避免了重复代码的编写。
下面的示例用类装饰器给所有类添加统一的日志前缀：
// 类装饰器：添加统一的日志方法
function AddLogger(prefix: string) {
return function <T extends { new (...args: any[]): {} }>(constructor: T) {
return class extends constructor {
log(message: string) {
console.log(`[${prefix}] ${message}`);
}
};
};
}
@AddLogger('用户模块')
class UserService {
getUser() {
(this as any).log('获取用户信息');
}
}
@AddLogger('订单模块')
class OrderService {
getOrder() {
(this as any).log('获取订单信息');
}
}
const userService = new UserService();
userService.getUser();
const orderService = new OrderService();
orderService.getOrder();
装饰器与传统元编程方式的对比
为了更直观地看到装饰器对元编程能力的提升，我们可以将装饰器和传统元编程方式进行对比：
| 对比维度 | 传统JavaScript元编程 | TypeScript装饰器 |
|---|---|---|
| 语法复杂度 | 需要手动操作原型、Proxy或者高阶函数，代码冗余度高 | 声明式语法，直接在定义处添加，简洁直观 |
| 可读性 | 元逻辑和业务逻辑混杂，难以快速定位核心逻辑 | 装饰器和业务代码分离，一眼就能看到附加的功能 |
| 类型支持 | 没有类型校验，容易出现参数错误 | 结合TypeScript类型系统，编译阶段就能发现错误 |
| 适用场景 | 适合动态性要求极高的场景，灵活性更高但风险也更高 | 适合需要统一添加通用逻辑的场景，稳定性和可维护性更好 |
装饰器的使用注意事项
虽然装饰器提升了元编程的便利性，但使用时也需要注意一些问题：
- 装饰器目前还处于Stage 3提案阶段，在TypeScript中使用需要开启
experimentalDecorators编译选项 - 多个装饰器作用于同一个目标时，执行顺序是从下往上、从右往左的，需要注意逻辑依赖
- 不要过度使用装饰器，复杂嵌套的装饰器反而会降低代码的可读性
TypeScript装饰器通过声明式的语法，让JavaScript的元编程变得更易上手、更易维护，它没有改变JavaScript元编程的核心能力，而是提供了一种更优的实现路径，让开发者可以更高效地完成元编程相关的需求。
TypeScript装饰器JavaScript元编程修改时间：2026-06-20 10:06:32