ts基础入门D3_装饰器

装饰器 decorator

类装饰器、属性装饰器、方法装饰器、访问器装饰器

• 类装饰器

类装饰器有返回值，返回的新类会替换被装饰的类
object.prorotype 某对象的原型对象
当new一个实例是会自动调用类的constructor

/*Demo函数会在类定义时执行 target是类*/
function Demo(target:Function){
console.log(target)} //装饰器函数

@Demo
class Person{  //类
constructor(name:string,age:number){
this.name=name
this.age=age}
}

const p1=new Person('tt',18)

• 如何声明一个构造类型

/*new表示该类型可以用new操作符调用，...args表示构造器可以接受任意数量的参数，
any[]表示构造器可以接受任意类型的参数
{}表示返回类型是非null，非undefined的对象*/
type Constructor=new (...args:any[]) =>{}  
function test(fn:Constructor){}
class Person{}
test(Person)

• 替换被装饰的类

返回一个类即可，但不仅覆盖原型还能提供更多功能

type Constructor=new (...args:any[])=>{}

function LogTime<T extends Constructor>(target:T){
return class extends target{
createdTime:Date
constructor(...args:any[]){
super(...args)
this.createdTime=new Date()
}
getTime(){
return '该对象创建时间是：${this.createdTime}' 
}
}
}
@LogTime
class Person{}

• 装饰器工厂

返回值是一个装饰器

interface Person{
introduce():void}
function LogInfo(n:number){
return function(target:Function){
target.prototype.introduce=function(){
for(i,n...)
}
}
}

@LogInfo（5）
class Person{
constructor(public name:string,public age:number){}
}
const p1=new Person("tt",18)
p1.introduce（）

• 装饰器组合

由上到下执行所有装饰器工厂，再由下到上执行所有装饰器

• 属性装饰器

function Demo(target:any,propertykey:any){
console.log(target,propertykey)    //property是属性名
}

class Person{
@Demo name:string   //target对于实例属性来说是类的原型对象
@Demo static school:string  //target对于静态属性来说值是类
constructor(name:string,public age:number){
this.name=name
this.age=age}
}

• 属性遮蔽

let value=130
//使用defineProperty给Person原型中添加age属性
Object.defineProperty(Person.prototype,'age'){
get(){
return value}
set(val){
value=val}
}
const p1=new Person('张三',18)  //当构造器试图在实例上赋值时，实际上是调用原型上age属性的set方法

可以监视属性的修改 function State

function State(target:object,propertyKey:string){
let key=`__${propertyKey}`
Object.defineProperty(target,propertyKey,{
get(){return this[key]},
set(newVal){
console.log(...) //监视属性变化
this[key]=newVal}
})
}

class Person{
@State age:number}

• 方法装饰器
  function Demo(target:object,propertyKey:string,descriptor:PropertyDescriptor) target:方法所在类的实例对象、propertyKey方法名、descriptor对方法整体描述对象
  装饰静态方法时，target是类
  可以让方法装饰器用于在方法执行前后追加

//一下是装饰器
//保存原始方法
const original-descriptor.value;
//替换原始方法
descriptor.value=function（...args:any[]）{
执行
const result=original.call(this,...args)  //以防原始方法会传递多少参数以及有返回值
执行
return result
}

• 访问器装饰器
  @Demo get address(){return }
• 参数装饰器