【TypeScript】浅析TypeScript中的装饰器（旧语法）

type

status

date

slug

summary

装饰器简介

装饰器是一种特殊类型的声明，使用@expression形式，可以附加到类的声明、方法、访问器、属性或参数上，其中expression必须是一个函数，会在运行时调用，并接收有关被装饰声明的信息。

按照所装饰的不同对象，装饰器可以分成五类：

类装饰器（Class Decorators）：用于类

属性装饰器（Property Decorators）：用于属性

方法装饰器（Method Decorators）：用于方法

存取器装饰器（Accessor Decorators）：用于类属性的存取器

参数装饰器（Parameter Decorators）：用于方法的参数

要使用装饰器，需要在tsconfig.json中启用experimentalDecorators选项：

装饰器不能用于函数，主要原因是存在函数提升，JavaScript的函数不管在代码的什么位置，都会提升到代码顶部。

装饰器的执行顺序遵循以下规则：

实例相关的装饰器。

静态相关的装饰器。

构造方法的参数装饰器。

类装饰器。

类装饰器

类装饰器应用于类构造函数，用于观察、修改或替换类定义，类型如下：

参数：

constructor：类的构造函数

返回值（可选）：

如果类装饰器有返回值，就会替换掉原来的构造方法

运行输出如下：

方法装饰器

方法装饰器用于装饰类的方法，可以修改方法的具体逻辑，类型如下：

参数：

target：方法所属的类的原型对象（对于静态方法是类的构造函数）

普通方法通过target.constructor.name获取类名
静态方法通过target.name获取类名

propertyKey：方法名
descriptor：方法的属性描述符（PropertyDescriptor）

descriptor是一个PropertyDescriptor对象，包含以下属性

可以通过修改descriptor.value来重写方法，注意返回值要和原方法一致

返回值：

可选，可以覆盖原始方法的描述对象

运行输出如下：

属性装饰器

属性装饰器用于装饰类的属性，类型如下：

参数：

target：类的原型对象（对于静态成员是类的构造函数）
propertyKey：属性名

返回值：

运行输出如下：

对于实例属性，属性装饰器的第一个参数，表示的是类的原型对象，而不是实例对象（即不是this对象），因为装饰器执行时，类还没有新建实例，所以实例对象不存在。

由于拿不到this，属性装饰器无法获得实例属性的值，因此打印undefined。

如果属性装饰器设置了当前属性的存取器（getter和setter），在构造函数里可对实例属性进行读写。

存取器装饰器

存取器装饰器用来装饰类的存取器，即getter和setter，类型如下：

参数：

target：存取器所属的类的原型对象（对于静态方法是类的构造函数）
propertyKey：存取器的属性名
descriptor：存取器的属性描述对象

返回值：

可选，会作为该存取器新的描述对象

不允许对同一个属性的getter和setter使用同一个装饰器，只能装饰两个存取器里面的一个，且必须前面的那个，因为装饰器可以从属性描述对象上面，同时拿到取值器和存值器。

运行输出如下：

参数装饰器

参数装饰器用来装饰构造方法或者其他方法的参数，类型如下：

参数：

target：方法所属的类的原型对象（对于静态方法是类的构造函数）
propertyKey：所装饰的方法的名字
parameterIndex：当前参数在方法的参数序列的位置（从0开始）

返回值：

运行输出如下：

参考资料

装饰器（旧语法） | 阮一峰 TypeScript 教程

装饰器 · TypeScript中文网 · TypeScript——JavaScript的超集