13_TypeScript 装饰器

前言：TypeScript 的学习到这里就先告一段落了，后续有时间会使用 TypeScript 语法进行一个demo 项目的开发。

一、概念

装饰器：装饰器是一种特殊类型的声明，它能够附加到类声明、方法、属性或参数上，可以修改类的行为。

通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。

常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器。

装饰器的方法：普通装饰器（无法传参）、装饰器工厂（可传参）。

装饰器是过去纪念中 js 最大的成就之一，也是 ES7 的标准特性之一。

二、类装饰器

类装饰器在类声明之前被声明（紧靠着类声明）。类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。传入一个参数。

普通装饰器（无法传参）

// 普通装饰器（无法传参）
// 装饰器
function logClass(params: any){console.log(params)// params 就是当前类params.prototype.apiUrl = '动态扩展的属性'params.prototype.run = function (){console.log("我是一个 run 方法")}
}
@logClass
class HttpClient {constructor(){}getData(){}
}
let http:any = new HttpClient()
http.run()
console.log(http.apiUrl)

装饰器工厂（可以传参）

// 装饰器工厂（可以传参）
function logClass(params: string){return function(target:any) {console.log(params)console.log(target)target.prototype.apiUrl = params}
}
@logClass("http://www.liu.com")
class HttpClient {constructor(){}getData(){}
}
let http:any = new HttpClient()
console.log(http.apiUrl)

类装饰器 重载构造函数。类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明。

function logClass(params: any){return  class extends params {apiUrl:any = '我是修改后的数'getData() {this.apiUrl +='----'console.log(this.apiUrl)}}
}
@logClass
class HttpClient {apiUrl: string | undefinedconstructor(){this.apiUrl = '我是构造函数中的apiUrl'}getData(){console.log(this.apiUrl)}
}
let http:any = new HttpClient()
console.log(http.apiUrl)

三、属性装饰器

属性装饰器表达式会在运行时当作函数被调用，传入下列 2 个参数：
1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
2、成员的名字

function logProperty(params: any) {return function (target:any, attr:any) {console.log(target, params, attr)target[attr] = params}}
class HttpClient {@logProperty('http://xxx.com')apiUrl: string | undefinedconstructor(){}getData(){console.log(this.apiUrl)}
}
let http:any = new HttpClient()
http.getData()

四、方法装饰器

它会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法定义。
方法装饰器会在运行时传入下列 2 个参数：
1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
2、成员的描述

function get(param:any) {return function(target:any,  desc: any) {console.log(param)console.log(target)console.log(desc)}
}
class HttpClient {apiUrl: string | undefinedconstructor(){}@get("xxx")getData(){}
}
let http:any = new HttpClient()
http.getData()

五、方法参数装饰器

参数装饰器表达式会在运行时当作函数被调用，可以使用参数装饰器为类的原型增加一些元素数据，传入下列三个参数
1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
2、方法的名称
3、参数在函数参数列表中的索引

function logParams(params:any) {return function(target:any, methodName:any, paramsIndex:any) {console.log(target, methodName, paramsIndex)}
}
class HttpClient {apiUrl: string | undefinedconstructor(){}getData(@logParams("id") id:any){console.log(id)}
}
let http:any = new HttpClient()
http.getData('12345678999655')

六、装饰器执行的顺序：属性装饰器–方法装饰器–方法参数装饰器–类装饰器

如果有多个同样的装饰器，它会先执行后面的。