属性装饰器和其他装饰器功能类似,其设计也是为了统一的、复用度更高的去监听,改变属性。
属性装饰器声明在一个属性声明之前(紧靠着属性声明)。 属性装饰器不能用在声明文件中(.d.ts),或者任何外部上下文(比如 declare的类)里。 属性装饰器表达式会在运行时当作函数被调用,传入下列2个参数:
下面记录三个例子来具体体现 场景。
代码目的:
拦截实例属性,处理加工,输出修改后的属性。例如输入艾希
得到 寒冰射手艾希
代码实现:
const nameDecorate:PropertyDecorator = (target: Object, propertyKey: string | symbol)=>{
let value:string
Object.defineProperty(target,propertyKey,{
set:(v)=>{
value = v
},
get:()=>{
return '寒冰射手'+value
}
})
}
class Hero {
@nameDecorate
name:string
}
let hb = new Hero()
hb.name = '艾希'
console.log(hb.name);
打印结果:
属性装饰器函数工厂实现
代码目的:
根据工厂装饰器key,返回json,在网络请求的时候经常会占用关键字,根据工厂装饰器key确定json 属性最终名称。
代码实现:
let json:{} = {}
const modelToJsonKey:(jsonKey:string)=>PropertyDecorator = (jsonKey)=>{
return (target:Object,pkey:string)=>{
Object.defineProperty(target,pkey,{
set:(v)=>{
json[jsonKey] = v
}
})
}
}
class TestMdoel {
@modelToJsonKey('title')
name:string
@modelToJsonKey('ID')
id:string
constructor(name:string,id:string){
this.name = name
this.id = id
}
}
let modell = new TestMdoel('zhangsan','881')
console.log(json);
控制台输出:
zhangyu@zhangyudeMacBook-Pro ~/Desktop/study/ts/js2ts-project ts-node propteryDecorate.ts
{ title: 'zhangsan', ID: '881' }
这是来自于官网的示例,中文档运行不通,我按照官网思想写了一遍。
代码目的:
通过属性装饰器格式,来格式化属性文字
代码实现:
import "reflect-metadata";
const format:(formatter:string)=>PropertyDecorator = (formatter)=>{
return (target: Object, propertyKey: string | symbol) => {
Reflect.defineMetadata(propertyKey,formatter,target)
}
}
class Greeter {
@format("Hello, %s")
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet(){
let format = Reflect.getMetadata("greeting",this)
format = format.replace("%s",this.greeting)
console.log(format);
}
}
let greeter = new Greeter('属性装饰器')
greeter.greet()
打印结果: