学习装饰器之前我们首先要明确一个概念：
装饰器本质上是一个函数，@expression 的形式其实是一个语法糖， expression 求值后必须也是一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。
在 Typescript 中使用装饰器需要我们在 tsconfig.json 里面开启支持选项 experimentalDecorators。
// tsconfig.json
"experimentalDecorators": true
类装饰器
声明一个函数去给 Class 的 age属性赋值：
function addAge(constructor: Function) {
constructor.prototype.age = 22;
}
@addAge
class Person {
name: string;
age!: number;
constructor() {
this.name = "朱小明"
}
}
let p = new Person();
console.log(p.age); //22
这段代码实际上基本等同于：
Person = addAge(function Person() { ... });
方法装饰器
方法装饰器声明在一个方法的声明之前，它会被应用到方法的属性描述符descriptor上，可以用来监视，修改或者替换方法定义。
方法装饰器会在运行时当作函数被调用，传入3个参数：
- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
- 成员的名字。
- 成员的属性描述符。
如果方法装饰器返回一个值，它会被用作方法的属性描述符。如果代码输出目标版本小于ES5返回值会被忽略。
class Person {
name: string;
constructor(name:string) {
this.name = name;
}
@fun(false)
static say() {
return "hello" + this.name
}
}
function fun(value: boolean) {
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log("target",target);
console.log("propertyKey",propertyKey);
descriptor.enumerable = value
console.log(descriptor);
}
}
const p = new Person("zhangsan")
输出结果如下：
target [Function: Person] { say: [Function] }
propertyKey say
{
value: [Function],
writable: true,
enumerable: false,
configurable: true
}
当 @fun(false) 被调用时，它会修改属性描述符的 enumerable 属性。
访问器装饰器
TypeScript 不允许同时装饰一个成员的get和set访问器，一个成员的所有装饰的必须应用在文档顺序的第一个访问器上。这是因为，在装饰器应用于一个属性描述符时，它联合了get和set访问器，而不是分开声明的。
访问器装饰器被调用时，传入3个参数：
- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
- 成员的名字。
- 成员的属性描述符。
class Person {
private name: string;
constructor(name: string) {
this.name = name;
}
@configurable(false)
get getName() {
return this.name
}
}
function configurable(value: boolean) {
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log(descriptor);
descriptor.configurable = value
}
}
const p = new Person("丁大宝")
console.log(p.getName);
输出结果如下：
{
get: [Function: get],
set: undefined,
enumerable: true,
configurable: true
}
丁大宝
属性装饰器
属性装饰器声明在一个属性声明之前，属性装饰器表达式在运行时被调用，传入下列2个参数：
- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
- 成员的名字。
注意：属性描述符不会做为参数传入属性装饰器
class Person{
@format("尼古拉斯·赵四")
name: string|undefined;
constructor() {
}
}
function format(value: string) {
return function (target: any, propertyKey: string) {
target[propertyKey] = value
}
}
const p = new Person()
console.log(p.name); //尼古拉斯·赵四
参数装饰器
参数装饰器声明在一个参数声明之前（紧靠着参数声明）。
参数装饰器表达式需要传入下列3个参数：
- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
- 参数名称
- 参数的索引
function getParams(target: Object, propertyKey: string, index: number) {
console.log(target,propertyKey,index);
}
class Person {
getInfo(@getParams name: string, @getParams age: number) {
return `${name}${age}岁了`
}
}
const p = new Person();
console.log(p.getInfo("zhangsan",20));
输出结果如下：
Person { getInfo: [Function] } getInfo 1
Person { getInfo: [Function] } getInfo 0
zhangsan20岁了
装饰器工厂
如果我们需要几个装饰器分别装饰到不同的成员上。我们可能会用下面这种写法：
@logClass
class Person{
@logProperty
name: string;
constructor(name:string) {
this.name = name;
}
@logMethod
getName() {
return this.name
}
}
// 类装饰器
function logClass(target: typeof Person) {
console.log(target);
}
// 属性装饰器
function logProperty(target: any, propertyKey: string) {
console.log(propertyKey);
}
// 方法装饰器
function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log(descriptor);
}
虽然可以达到我们想要的效果，但我们还可以继续优化，用一个装饰器工厂来进一步抽象上述代码：
function log(...args: any[]) {
switch (args.length) {
case 1:
return logClass.apply(this, args);
case 2:
return logProperty.apply(this, args);
case 3:
return logMethod.apply(this, args)
default:
throw new Error("error")
}
}
装饰器组合
在TypeScript里，当多个装饰器应用在一个声明上时会进行如下步骤的操作：
- 由上至下依次对装饰器表达式求值。
- 求值的结果会被当作函数，由下至上依次调用。
如果我们使用[装饰器工厂]的话，可以通过下面的例子来观察它们求值的顺序：
function f() {
console.log("f(): evaluated");
return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
console.log("f(): called");
}
}
function g() {
console.log("g(): evaluated");
return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
console.log("g(): called");
}
}
class C {
@f()
@g()
method() {}
}
输出结果如下：
f(): evaluated
g(): evaluated
g(): called
f(): called
装饰器求值顺序：
- 参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个实例成员。
- 参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个静态成员。
- 参数装饰器应用到构造函数。
- 类装饰器应用到类。