TypeScript装饰器用法详解 – TypeScript开发教程

上一章TypeScript教程请查看：TypeScript使用泛型编程

修饰符是一种特殊类型的声明，可以应用于类、方法、访问器、属性或参数。修饰符只是以@expression符号为前缀的函数，其中表达式必须求值为一个函数，该函数将在运行时用有关修饰声明的信息调用。

注意: 装饰器是为ES7提出的一个实验性特性，它已经被一些JavaScript框架使用，包括Angular 2，装饰器在未来的版本中可能会改变。

要启用对decorator的实验支持，我们必须在命令行或在我们的tsconfig.json中启用experimentalDecorators编译器选项:

命令行

$tsc --target ES5 --experimentalDecorators  

tsconfig.json

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

装饰器的目的

TypeScript装饰器以声明的方式将注释和元数据添加到现有代码中。

装饰器工厂

要定制decorator如何应用于声明，我们可以编写decorator工厂，decorator工厂是一个函数，它返回将在运行时由decorator调用的表达式。

一个装饰工厂可以这样写:

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

装饰器组成

我们可以对一个声明应用多个装饰器。下面的例子有助于理解它。

在单行上

@f @g x  

在多行上

@f  
@g  
x  

修饰符的类型

TypeScript使用以下类型的装饰器:

• 类的修饰符
• 方法修饰符
• 访问修饰符
• 属性修饰符
• 参数修饰符

1. 类的修饰符

类装饰器是在类声明之前定义的，它讲述类的行为。类装饰器应用于类的构造函数。类修饰符可用于观察、修改或替换类定义。如果类装饰器返回一个值，它将用给定的构造函数替换类声明。

例子:

@sealed  
class Person {  
    msg: string;  
    constructor(message: string) {  
        this.msg = message;  
    }  
    show() {  
        return "Hello, " + this.msg;  
    }  
}  

在上面的例子中，当@seal decorator被执行时，它将密封构造函数和它的原型，这样我们就不能继承Person类了。

2. 方法修饰符

方法修饰符是在方法声明之前定义的。它应用于方法的属性描述符。它可用于观察、修改或替换方法定义。我们不能在声明文件中使用方法修饰符。

方法装饰器函数的表达式接受三个参数。它们是:

• 要么是静态成员的类的构造函数，要么是实例成员的类的原型。
• 成员的名字。
• 成员的属性描述符。

例子:

在下面的示例中，@log装饰器将记录新条目。

class Item {  
    itemArr: Array;  
    constructor() {  
        this.itemArr = [];  
        }  
    @log  
    Add(item: string): void {  
       this.itemArr.push(item);  
       }  
    GetAll(): Array {  
       return this.itemArr;  
       }  
}  

3.访问修饰符

访问器装饰器就是在访问器声明之前定义的。它应用于访问器的属性描述符。它可用于观察、修改或替换访问器的定义。

注意:访问器是类声明的getter和setter属性。

访问器装饰器函数的表达式接受三个参数。它们是:

• 要么是静态成员的类的构造函数，要么是实例成员的类的原型。
• 成员的名字。
• 成员的属性描述符。

例子:

在下面的示例中，访问器装饰器(@可配置)应用于Employee类的成员。

class Employee {  
    private _salary: number;  
    private _name: string;  
  
    @configurable(false)  
    get salary() { return 'Rs. ${this._salary}'; }  
    set salary(salary: any) { this._salary = +salary; }  
  
    @configurable(true)  
    get name() { return 'Sir/Madam, ${this._name}'; }  
    set name(name: string) { this._name = name; }  
}  

4. 属性修饰符

属性修饰符是在属性声明之前定义的。它类似于方法装饰器。属性修饰符和方法修饰符之间的惟一区别是它们不接受属性描述符作为参数，也不返回任何内容。

属性装饰器函数的表达式接受两个参数。它们是:

• 要么是静态成员的类的构造函数，要么是实例成员的类的原型。
• 成员的名字。

例子:

在下面的示例中，@ReadOnly装饰器将把name属性设置为只读，因此我们不能更改它的值。

class Company {  
 @ReadOnly   
 name: string = "srcmini02.com";  
}  
let comp = new Company();  
comp.name = 'example.com'; // 不能更改
console.log(comp.name); // 

5. 参数修饰符

参数修饰符是在参数声明之前定义的。它应用于类构造函数或方法声明的函数。它不能用于声明文件或任何其他环境上下文(如在已声明的类中)。

参数装饰器函数的表达式接受三个参数。它们是:

• 要么是静态成员的类的构造函数，要么是实例成员的类的原型。
• 成员的名字。
• 函数中参数的索引?参数列表。

例子:

在下面的示例中，参数修饰符(@required)应用于Person类成员的参数。

class Person {  
    msg: string;  
    constructor(message: string) {  
        this.msg = message;  
    }  
    @validate  
    show(@required name: string) {  
        return "Hello " + name + ", " + this.msg;  
    }  
}