TypeScript 与 ES6 的装饰器？
- ES6 的装饰器是一种函数，写成@ + 函数名。它可以放在类和类方法的定义前面。
- TypeScript 的装饰器是一种特殊类型的声明，它能够被附加到类、方法、访问符、属性和参数上。装饰器使用 @expression 这种形式，expression 求值后必须是一个函数，会在运行时被调用，被装饰的声明信息作为参数传入。
注意：装饰器是一项实验性特性，在未来的版本中可能会发生变化
在 TypeScript 中不能直接使用，必须要启用实验性装饰器，可以在命令行或者 tsconfig.json 里启用 experimentalDecoratiors 编译器选项：
- 命令行
tsc --target ES5 --experimentalDecorators
- tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
装饰器只能装饰类里面的东西，因为函数存在声明的提升，所以不能装饰单个函数。
一、装饰器工厂
一个最简单的装饰器是 @ + 函数名，例如 sealed 装饰器，定义 sealed 函数如下：
function sealed(target:any) {
console.log(target);
}
@sealed
class A{}
这个装饰器缺点特别的明显，我们无法传入参数，所以出现了装饰器工厂，装饰器工厂就是个高阶函数，函数返回函数，利于我们传入参数。
function color(params: string) { // 这是装饰器工厂
return function(target:any) { // 这是装饰器
target.prototype.colorName = params;
console.log(params);
console.log(target);
}
}
@color("red")
class Color{
colorName:string = "blue";
constructor(){
}
};
二、组合装饰器
多个装饰器可以同时应用到一个声明上，比如：
书写在同一行上：
@f @g x
书写在多行上（推荐）：
@f
@g
x
当多个装饰器应用在同一个声明上的时候，装饰器的执行顺序为：
- 如果不是装饰器工厂的话，执行顺序由下往上。
function sigle1(target:any) {
console.log(1);
}
function sigle2(target:any) {
console.log(2);
}
function sigle3(target:any) {
console.log(3);
}
@sigle1
@sigle2
@sigle3
class A {
}
//执行结果321
- 如果是装饰器工厂的话，先执行完工厂函数，然后再去由下而上执行装饰器函数。
function f() {
console.log("1");
return function (target:any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log("2");
}
}
function g() {
console.log("3");
return function (target:any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log("4");
}
}
function h() {
console.log("5");
return function (target:any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log("6");
}
}
class C {
@f()
@g()
@h()
method() {}
}
//执行结果为135642
三、类装饰器
类装饰器表达式会在运行时当做函数被调用，类的构造函数作为其唯一的参数。
function color(params: string) { // 这是装饰器工厂
return function(target:any) { // 这是装饰器
target.prototype.colorName = params;
target.prototype.run = ()=>{};
console.log(params);
console.log(target);
}
}
@color("red")
class Color{
colorName:string = "blue";
constructor(){
}
};
可以在不修改原类的情况下，动态修改类的属性和方法。甚至还可以返回一个类，例如：
function color(target: any) { // 这是装饰器
return class A extends target {
method(){
console.log("A")
}
}
}
@color
class Color{
method(){
console.log("Color");
}
getData(){
}
};
四、方法装饰器
方法装饰器 ：声明在一个方法之前（紧靠着方法声明）。它会被应用到方法的 属性描述符 上，可以用来监视、修改或者替换方法定义。
方法装饰器不能用在声明文件（.d.ts），重载或者任何外部上下文（比如 declate 类）中。
方法装饰器表达式会在运行时当做函数被调用，传入下面3个参数：
对于静态成员来说是类的构造函数，对于实例成员来说是类的原型对象
成员的名字
成员的 属性描述符
注意：如果代码输出目标版本小于 ES5，属性描述符是 undefined，如果代码输出目标版本小雨 ES5，属性返回值会被忽略。
如果方法装饰器返回一个值，他会被用作方法的 属性描述符。
下面是一个方法装饰器 @enumerable 的例子，应用到 Greeter 类的方法上：
function enumerable(value: boolean) {
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log(target,propertyKey,descriptor);
console.log("装饰的函数"+descriptor.value);
descriptor.enumerable = value;
};
}
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
@enumerable(false)
greet() {
return "Hello, " + this.greeting;
}
}
这里的 @enumerable(false) 是一个装饰工厂，当装饰器 @enumerable(false) 被调用的时候，它会修改属性描述符的 enumerable 属性。
五、参数装饰器
参数装饰器：声明在一个参数声明之前（紧靠着参数声明）。 参数装饰器应用于类构造函数或方法声明。 参数装饰器不能用在声明文件（.d.ts），重载或其它外部上下文（比如 declare 的类）里。
参数装饰器表达式会在运行时当作函数被调用，传入下列3个参数：
对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
此函数的名字。
参数在函数参数列表中的索引。
注意： 参数装饰器只能用来监视一个方法的参数是否被传入。
下例定义了参数装饰器（@getParams）并应用于 A 类方法的一个参数：
function getParams(value: boolean) {
return function (target: any, name: string, index: number) {
console.log(target,name,index);
};
}
class A {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet(@getParams(false)str:string) {
return "Hello, " + this.greeting;
}
}
六、属性装饰器
属性装饰器声明在一个属性声明之前（紧靠着属性声明）。 属性装饰器不能用在声明文件中（.d.ts），或者任何外部上下文（比如 declare 的类）里。
属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：
- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
- 成员的名字。
注意 属性描述符 不会做为参数传入属性装饰器，这与 TypeScrip t是如何初始化属性装饰器的有关。
因为目前没有办法在定义一个原型对象的成员时描述一个实例属性，并且没办法监视或修改一个属性的初始化方法。
返回值也会被忽略。
因此，属性描述符只能用来监视类中是否声明了某个名字的属性。
function getProperty(value: boolean) {
return function (target: any, name: string) {
console.log(target,name);
};
}
class A {
@getProperty(false)
greeting: string;
constructor(message: string) {
this.greeting = message;
}
}
七、访问符装饰器
访问器装饰器 声明在一个访问器的声明之前（紧靠着访问器声明）。访问器装饰器应用于访问器的 属性描述符 并且可以用来监视、修改或者替换一个访问器的定义。访问器装饰器不能用于声明文件中（.d.ts），或者任何外部上下文（比如 declare 的类）中。
注意： TypeScript 不允许同时装饰一个成员的 get 和 set 装饰器。取而代之的是，一个成员的所有装饰器必须应用在文档顺序的第一个访问器上。
这是因为，在装饰器应用于一个 属性描述符 时，它联合了 get 和 set 访问器，而不是分开声明的。
访问器装饰器表达式会在运行时当做函数被调用，传入下面3个参数：
- 对于静态成员是类的构造函数，对于实例成员是类的原型对象
- 成员的名字
- 成员的 属性描述符
注意：如果代码输出目标版本小于 ES5, property descriptor 成员属性描述符将会是 undefined
如果访问器返回一个值，它会被用作方法的 属性描述符。
注意：如果代码输出目标版本小于 ES5，返回值会被忽略
function getProperty(value: boolean) {
return function (target: any, name: string) {
console.log(target,name);
};
}
function configurable(val: boolean) {
return function (target: any, name: string, desc: PropertyDescriptor) {
console.log(target,name , desc);
};
}
class A {
@getProperty(false)
greeting: string;
constructor(message: string) {
this.greeting = message;
}
@configurable(false)
get props(){return 111}
set props(value:any){return value}
}
八、装饰器求值顺序
装饰器的执行顺序：
function a(target:any) {
console.log(1)
}
function b(target:any,name:string) {
console.log(2)
}
function c(target:any,name:string) {
console.log(3)
}
function d(target:any,name:string) {
console.log(4)
}
function e(target:any,name:string,index:number) {
console.log(5)
}
@a
class A {
@b
greeting: string;
constructor(message: string) {
this.greeting = message;
}
@d
method(@e str:string){
}
@c
get props(){return 111}
}
//25431
属性装饰器<= 参数装饰器<=方法装饰器<=访问符装饰器<=类装饰器
网友评论