搞懂 TypeScript 四种装饰器

欢迎你阅读 「《重学 TypeScript 3.0》」 系列教程，本系列教程会包含 TypeScript 基础知识、进阶知识、类型体操（精选）、设计模式、核心特性实战和开源项目源码解析 「6」 大专题的内容。

上个月 1 月 26 号 TypeScript 团队发布了 「TypeScript 5.0 Beta」 版，该版本带来了很多新的特性，其中就包含了新的 ECMAScript 装饰器特性。TypeScript 5.0 Beta 已经实现了 Stage 3 装饰器提案（Decorators Proposal）。本文阿宝哥不会介绍新的装饰器特性，而是带大家先回顾一下 5.0 Beta 版本前的装饰器。

如果你之前使用过 Angular 或 NestJS 框架，那么你对装饰器应该不会陌生。

import { Controller, Get } from '@nestjs/common';

@Controller('cats')
export class CatsController {

  @Get()
  findAll(): string {
    return 'This action returns all cats';
  }
}

在以上代码中，@XXX 是装饰器的语法，是一种语法糖。在 TypeScript 项目中要使用装饰器的特性，你必须在命令行或 「tsconfig.json」 文件中启用 「experimentalDecorators」 编译器选项。

{
  "compilerOptions": {
     "target": "es2016",
     "experimentalDecorators": true
   }
}

装饰器主要有四种类型：

• Class Decorator（类装饰器）
• Property Decorator（属性装饰器）
• Method Decorator（方法装饰器）
• Parameter Decorator（参数装饰器）

那么这四种装饰器之间有什么区别呢？它们的应用场景是什么？接下来，阿宝哥将逐一介绍它们。如果你已经掌握装饰器，但对「装饰器设计模式」感兴趣，可以阅读 "装饰器模式，优雅扩展对象的功能！" 这一篇文章。

❝

提示：Android 平台 1 元 10 个微豆，iOS 平台 1 元 7 个微豆，购买时可切换平台充值。

❞