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')
六、装饰器执行的顺序:属性装饰器–方法装饰器–方法参数装饰器–类装饰器
如果有多个同样的装饰器,它会先执行后面的。