TypeScript 方法装饰器怎么用
在前端开发里，你是不是经常遇到“代码写了一大片，想给某个功能加个小逻辑，却要改好多地方”的麻烦？比如给接口请求加个统一的 loading 提示，或者给方法加个简单的日志记录？这时候，有一种叫“装饰器”的语法，就能帮你轻松搞定，而 TypeScript 里的方法装饰器，更是专门给类里的方法“穿小外套”的小工具，今天咱们就用生活化的例子把它讲明白。
---
先搞懂：什么是方法装饰器？
你可以把它想象成“方法的小挂件”——不用改变方法本身的代码，只要给它挂个小挂件，就能自动多做一件事。比如你要去超市买水，不用重新做一瓶水，只要给手里的水瓶挂个“冷藏标签”，它就自动变成冰的；方法装饰器就是这个“冷藏标签”，挂在方法上，这个方法执行时就会自动多做你想加的逻辑。
它的用法是在方法上面加个 @ 开头的标记，再跟一个对应的函数，这个函数就是装饰器本身。举个最常见的例子：给方法加日志，记录这个方法什么时候被调用。
---
第一步：先把 TypeScript 准备好
很多人可能会说“我用的是 JavaScript，TypeScript 是啥？”其实不用怕，咱们只要简单做两步就能用方法装饰器：
- 初始化一个简单的 TS 项目，只要在
tsconfig.json里加一行配置："experimentalDecorators": true，这是给 TypeScript 开“装饰器权限”的开关；
新建一个 `.ts` 文件，开始写代码就行。
---
第二步：写第一个方法装饰器（用日志当例子）
咱们来写一个“日志装饰器”，只要挂在方法上，就能自动打印“方法名 + 调用时间”。代码很简单，咱们逐行拆：
`typescript
// 定义方法装饰器，参数有固定三个，不用记，记住是这三个就行
function logMethod(target: any, methodName: string, descriptor: PropertyDescriptor) {
// 拿到原来的方法，就是 descriptor.value
const originalMethod = descriptor.value;
// 替换原来的方法：执行时先打日志，再跑原来的方法
descriptor.value = function(...args: any[]) {
console.log([${new Date().toLocaleTimeString()}] 调用了方法：${methodName});
// 把原来方法的参数传回去，再执行，这样原来的逻辑不会丢
return originalMethod.apply(this, args);
};
// 把改好的 descriptor 还给 TypeScript
return descriptor;
}
`
这个函数就是咱们的“小挂件工厂”，做好了之后，只要给类里的方法挂这个挂件就行。
---
第三步：给方法挂上装饰器，用起来
咱们写一个类，模拟“外卖接单”的场景，给接单方法挂这个日志装饰器：
`typescript
class OrderService {
// 挂装饰器的地方，就像给接单的笔贴个“要记日志”的贴纸
@logMethod
takeOrder(foodName: string, address: string) {
console.log(已接单：${foodName}，地址：${address});
}
}
// 测试一下：创建实例，调用方法
const orderService = new OrderService();
orderService.takeOrder('麻辣香锅', 'XX小区3栋201');
`
运行之后，控制台会先打印 [XX:XX:XX] 调用了方法：takeOrder，再打印接单的内容——完全没改原来的 takeOrder 方法，就多了日志功能，是不是很方便？
---
再举个实用例子：加方法执行时间统计
除了日志，咱们还可以用方法装饰器做更实用的事，比如统计方法花了多久：
`typescript
function measureTime(target: any, methodName: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args: any[]) {
const startTime = Date.now();
const result = originalMethod.apply(this, args);
const endTime = Date.now();
console.log(方法 ${methodName} 执行了 ${endTime - startTime} 毫秒);
return result;
};
return descriptor;
}
`
给刚才的 takeOrder 再挂这个装饰器，就能看到它执行花了多久——哪怕你以后换别的方法，只要挂这个装饰器，就能自动计时，不用每次都写计时代码。
最后要提醒的是，方法装饰器虽然好用，但别过度使用——不是所有功能都要靠装饰器加，比如逻辑复杂的功能，还是直接写在方法里更清晰；只有那种“通用、重复用的小逻辑”，用方法装饰器才是最优选择。