TypeScript 装饰器

随着TypeScript和ES6里引入了类，在一些场景下我们需要额外的特性来支持标注或修改类及其成员。装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上，可以修改类的行为。
通俗的讲，装饰器就是一个方法，可以注入到类、方法、属性、参数上来扩展类、方法、属性、参数的功能。
常见的装饰器有：普通装饰器（无法传参）、装饰器工厂（可传参）

装饰器工厂

如果我们要定制一个修饰器如何应用到一个声明上，我们得写一个装饰器工厂函数。 装饰器工厂就是一个简单的函数，它返回一个表达式，以供装饰器在运行时调用。

我们可以通过下面的方式来写一个装饰器工厂函数：

function color(value: string) { // 这是一个装饰器工厂
    return function (target) { //  这是装饰器
        // do something with "target" and "value"...
    }
}

装饰器组合

多个装饰器可以同时应用到一个声明上，就像下面的示例：

• 书写在同一行上：

@f @g x

• 书写在多行上：

@f
@g
x

当多个装饰器应用于一个声明上，它们求值方式与复合函数相似。在这个模型下，当复合f和g时，复合的结果(f ∘ g)(x)等同于f(g(x))。下面的修饰器的执行顺序的例子中会举例说明。

装饰器类型 (五种装饰器)

• 类装饰器
• 属性装饰器
• 方法装饰器
• 函数参数装饰器

• 访问器装饰器

一、类装饰器 

类装饰器在类声明之前被声明（紧靠着类声明）。 类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。 类装饰器不能用在声明文件中( .d.ts)，也不能用在任何外部上下文中（比如declare的类）。

类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。

如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明。

注意  如果你要返回一个新的构造函数，你必须注意处理好原来的原型链。 在运行时的装饰器调用逻辑中 不会为你做这些。

// 类装饰器（target 就是当前类）---- 普通装饰器（无法传参）
function logClass(target: any) {
    console.log(target);
    target.prototype.apiUrl = 'dfdjfadgadgadjfad';
    target.prototype.run = function() {
        console.log('这是扩展的run方法');
    }
}

@logClass
class HttpClient {
    constructor() {

    }

    getData() {

    }
}
var http:any = new HttpClient();
console.log(http.apiUrl);
http.run();

// 类装饰器 ---- 装饰器工厂（可传参）
function logClass(params: string) {
    console.log(params);
    // target 就是当前类
    return function(target: any) {
        console.log(target);
        console.log(params);
        target.prototype.apiUrl = params;
    }
}

@logClass('http://www.baidu.com')
class HttpClient {
    constructor() {

    }

    getData() {

    }
}
var http: any = new HttpClient();
console.log(http.apiUrl);

// 类装饰器重载构造函数
// 类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数
// 如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明
function logClass(target: any) {
    console.log(target);
    return class extends target {
        apiUrl: any = '我是修改后的apiUrl';
        getData() {
            this.apiUrl += '----'
            console.log(this.apiUrl);
        }
    }
}

@logClass
class HttpClient {
    public apiUrl: string | undefined;
    constructor() {
        this.apiUrl = '我是构造函数里的apiUrl';
    }

    getData() {
        console.log(this.apiUrl);
    }
}
var http: any = new HttpClient();
http.getData();

二、属性装饰器

属性装饰器声明在一个属性声明之前（紧靠着属性声明）。 属性装饰器不能用在声明文件中（.d.ts），或者任何外部上下文（比如 declare的类）里。

属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：

1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2. 成员的名字。

注意  属性描述符不会做为参数传入属性装饰器，这与TypeScript是如何初始化属性装饰器的有关。 因为目前没有办法在定义一个原型对象的成员时描述一个实例属性，并且没办法监视或修改一个属性的初始化方法。返回值也会被忽略。因此，属性描述符只能用来监视类中是否声明了某个名字的属性。

// 属性装饰器
function logProperty(params: any) {
    return function(target: any, attrName: any) {
        console.log("target:",target);
        console.log("attrName:",attrName);
        target[attrName] = params;
    }
}

class HttpClient {
    @logProperty('http://www.baidu.com2222')
    public url: string | undefined;
    constructor() {

    }

    getData() {
        console.log("this.url:",this.url)
    }
}
var http:any = new HttpClient();
http.getData();  // http://www.baidu.com2222

 三、方法装饰器

方法装饰器声明在一个方法的声明之前（紧靠着方法声明）。 它会被应用到方法的 属性描述符上，可以用来监视，修改或者替换方法定义。 方法装饰器不能用在声明文件( .d.ts)，重载或者任何外部上下文（比如declare的类）中。

方法装饰器表达式会在运行时当作函数被调用，传入下列3个参数：

1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2. 成员的名字。
3. 成员的属性描述符。

注意  如果代码输出目标版本小于ES5，属性描述符将会是undefined。

如果方法装饰器返回一个值，它会被用作方法的属性描述符。

注意  如果代码输出目标版本小于ES5返回值会被忽略。

 

// 修改当前实例的属性 & 方法
// 方法装饰器
function get(params: any) {
    // target 就是当前类
    return function(target: any, methodName: any, desc: any) {
        console.log(target);
        console.log(methodName);
        console.log(desc);

        // 修改当前实例的属性 & 方法
        target.apiUrl = 'xxxxxxxxxx';
        target.run = function() {
            console.log('run...');
        }
    }
}
class HttpClient {
    public url: string | undefined;
    constructor() {

    }
    @get('http://www.baidu.com2222')
    getData() {
        console.log(this.url)
    }
}
var http: any = new HttpClient();
console.log(http.apiUrl);  // xxxxxxxxxx
http.run();  // run...

// 利用方法装饰器修改方法
// 方法装饰器
function get(params: any) {
    // target 就是当前类
    return function(target: any, methodName: any, desc: any) {
        console.log(target);
        console.log(methodName);
        console.log(desc);

        // 保存当前方法
        var oMethod = desc.value;

        // 修改装饰器的方法，比如把装饰器方法里面传入的所有参数改为string类型
        desc.value = function(...args: any[]) {
            args = args.map(value => {
                return String(value);
            })
            console.log(args);
            oMethod.apply(this, args);
        }
    }
}
class HttpClient {
    public url: string | undefined;
    constructor() {

    }
    @get('http://www.baidu.com2222')
    getData(...args: any[]) {
        console.log(args);
        console.log('我是原本的getData方法');
    }
}
var http: any = new HttpClient();
http.getData(123, 456, 78911111);

四、函数参数装饰器

参数装饰器声明在一个参数声明之前（紧靠着参数声明）。 参数装饰器应用于类构造函数或方法声明。 参数装饰器不能用在声明文件（.d.ts），重载或其它外部上下文（比如 declare的类）里。

参数装饰器表达式会在运行时当作函数被调用，传入下列3个参数：

1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2. 成员的名字。
3. 参数在函数参数列表中的索引。

注意  参数装饰器只能用来监视一个方法的参数是否被传入。

参数装饰器的返回值会被忽略。

 

function logParams(params: any) {
    console.log(params);
    return function(target: any, methodName: any, paramsIndex: any) {
        console.log(target);
        console.log(methodName);
        console.log(paramsIndex);

        target.apiUrl = params;
    }
}

class HttpClient {
    public url: string | undefined;
    constructor() {

    }
    getData(@logParams('xxxxxx') uuid: any) {
        console.log(uuid);
    }
}

var http: any = new HttpClient();
http.getData(123456);
console.log(http.apiUrl);  // xxxxxx

五、访问器装饰器

访问器装饰器声明在一个访问器的声明之前（紧靠着访问器声明）。 访问器装饰器应用于访问器的 属性描述符并且可以用来监视，修改或替换一个访问器的定义。

注意  TypeScript不允许同时装饰一个成员的get和set访问器。取而代之的是，一个成员的所有装饰的必须应用在文档顺序的第一个访问器上。这是因为，在装饰器应用于一个属性描述符时，它联合了get和set访问器，而不是分开声明的。

访问器装饰器表达式会在运行时当作函数被调用，传入下列3个参数：

1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2. 成员的名字。
3. 成员的属性描述符。

注意  如果代码输出目标版本小于ES5，Property Descriptor将会是undefined。

如果访问器装饰器返回一个值，它会被用作方法的属性描述符。

注意  如果代码输出目标版本小于ES5返回值会被忽略。

function configurable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        descriptor.configurable = value;
    };
}

class Point {
    private _x: number;
    private _y: number;
    constructor(x: number, y: number) {
        this._x = x;
        this._y = y;
    }

    @configurable(false)
    get x() { return this._x; }

    @configurable(false)
    get y() { return this._y; }
}

 装饰器执行顺序

• 装饰器工厂需要先求值，再装饰，求值顺序是由上到下
• 装饰器可以直接求值，装饰顺序是由下到上

function logClass1(params: string) {
    console.log('类装饰器1 求值')
    return function(target: any) {
        console.log('类装饰器1');
    }
}
function logClass2(params: string) {
    console.log('类装饰器2 求值')
    return function(target: any) {
        console.log('类装饰器2');
    }
}
function logAttribute(params?: string) {
    console.log('属性装饰器1 求值')
    return function(target: any, attrName: any) {
        console.log('属性装饰器1');
    }
}
function logMethod1(params?: string) {
    console.log('方法装饰器1 求值')
    return function(target: any, methodName: any, desc: any) {
        console.log('方法装饰器1');
    }
}
function logMethod2(params?: string) {
    console.log('方法装饰器2 求值')
    return function(target: any, methodName: any, desc: any) {
        console.log('方法装饰器2');
    }
}

function logParams1(params?: string) {
    console.log('参数装饰器1 求值')
    return function(target: any, methodName: any, paramsIndex: any) {
        console.log('参数装饰器1');
    }
}
function logParams2(params?: string) {
    console.log('参数装饰器2 求值')
    return function(target: any, methodName: any, paramsIndex: any) {
        console.log('参数装饰器2');
    }
}

@logClass1('class 1')
@logClass2('class 2')
class HttpClient {
    @logAttribute()
    public apiUrl: string | undefined;
    constructor() {

    }

    @logMethod1()
    @logMethod2()
    getData() {
        console.log('getData ... ');
    }

    setData(@logParams1() attr1: any, @logParams2() attr2: any) {
        console.log('setData ... ');
    }
}

var http: any = new HttpClient();

// 属性装饰器1 求值
// 属性装饰器1

// 当复合f和g时，复合的结果(f ∘ g)(x)等同于f(g(x))
// 方法装饰器1 求值
// 方法装饰器2 求值
// 方法装饰器2
// 方法装饰器1

// 参数装饰器1 求值
// 参数装饰器2 求值
// 参数装饰器2
// 参数装饰器1

// 当复合f和g时，复合的结果(f ∘ g)(x)等同于f(g(x))
// 类装饰器1 求值
// 类装饰器2 求值
// 类装饰器2
// 类装饰器1

 属性描述符

在Javascript中，某些属性附加到每个属性。 这些属性更改每个属性的行为。 有时，这些属性会阻止枚举属性。简单来说，属性描述符只是一个对象，它将定义对象的属性的行为方式。

让我们看看这些属性的含义- 

configurable为true ，因此我们可以删除此成员。

enumerable为false ，我们无法迭代，因此我们不会通过Object.keys获得此属性

writable为false ，我们可以更改默认实现，因此可以覆盖。

成员的value值，它是toString属性的函数。

当我们编写自己的对象时，我们还可以为我们的对象属性设置这些属性的值。

要设置对象属性的描述符，我们可以使用defineProperty方法。

const user = { name: "ashraful" };
Object.defineProperty(user, "name", {
  writable: false,
  configurable: false,
  enumerable: false,
});
// 我们不能重新赋值，因为 writable 设置为 false 
user.name = "new name";
user.name = "new name";
// 我们不能删除 name 属性，因为可配置设置为 false 
delete user.name;
// 我们不能迭代属性，因为 enumerable 设置为 false 
console.log(Object.keys(user)); // => []
console.log(user); // => {name: "ashraful"}

牢记属性描述符，我们可以编写可维护且不易出错的代码。 我们可以根据需要更改某些应用程序对象属性的描述符。 因此，将来，某人将无法意外更改或修改这些属性。