装饰器

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。 装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。

在TypeScript中装饰器还属于实验性语法，所以要想使用必须在配置文件中tsconfig.json编译选项中开启：

{
  "compilerOptions": {
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true, 
  }
}    

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

function TestDectorator(constructor:any){
    constructor.prototype.getName=function(){
        console.log('小白')
    }
}
@TestDectorator
class Test{
}
const test=new Test();
(test as any).getName()//小白

通过不同参数参数返回不同数据

function TestDectorator(flag:boolean){
    if(flag){
        return function(constructor:any){
            constructor.prototype.getName=()=>{
                console.log('小白')
            }
        }
    }else{
        return function(constructor:any){
            constructor.prototype.getName=()=>{
                constructor.log('小黑')
            }
        }
    }
}
@TestDectorator(true)
class Test{
}
const test=new Test();
(test as any).getName()//小白

重构

function TestDectorator(){
    return function<T extends new (...args:any[])=>any> (constructor:T){
        return class extends constructor{
            name='小白'
            getName(){
                return this.name
            }
        }
    }
}
const Test=TestDectorator()(class {
    name:string;
    constructor(name:string){
        this.name=name
    }
})
const test=new Test('小黑')
console.log(test.getName())//小白

方法装饰器声明在一个方法的声明之前（紧靠着方法声明）。 它会被应用到方法的 属性描述符上，可以用来监视，修改或者替换方法定义

function getNameDectorator(target:any,protertyKey:string,descriptor: PropertyDescriptor){
    console.log(target,1,protertyKey,2,descriptor)
    descriptor.value=function(){
        return '小白'
    }
}
class Test{
    name:string;
    constructor(name:string){
        this.name=name
    }
    @getNameDectorator
    getName(){
        return this.name
    }
}
const test=new Test('小黑')
console.log(test.getName())//小白

访问器装饰器声明在一个访问器的声明之前（紧靠着访问器声明）。 访问器装饰器应用于访问器的 属性描述符并且可以用来监视，修改或替换一个访问器的定义。

function TestDectorator(target:any,protertyKey:string,descriptor: PropertyDescriptor){
   // descriptor.writable = false;
}
class Test{
    private _name:string;
    constructor(name:string){
        this._name=name
    }
    get name(){
        return this._name
    }
    @TestDectorator
    set name(name:string){
        this._name=name
    }
}
const test=new Test('小白')
test.name='小黑'
console.log(test.name)//小黑

属性装饰器声明在一个属性声明之前（紧靠着属性声明）

function nameDectorator(target: any, propertyKey: string):any{
    const descriptor: PropertyDescriptor = {
            writable: false//不可修改
          };
    return descriptor
}
class Test{
    @nameDectorator
    name='小白'
}
const test=new Test()
test.name='小黑'//上面设置不能修改后，编译会报错
console.log()

参数装饰器声明在一个参数声明之前（紧靠着参数声明）。 参数装饰器应用于类构造函数或方法声明。

function TestDecorator(target: any, method: string, paramIndex: number) {
    console.log(target, method, paramIndex);
    // 原型，方法名，参数所在的位置
  }
  
  class Test {
    getInfo(name: string, @TestDecorator age: number) {
      console.log(name, age);
    }
  }
  
  const test = new Test();
  test.getInfo('小白', 18);

一个实例

const userInfo:any=undefined
function TestDecorator(mes:string){
    return  function (target:any,protertyKey:string,descriptor: PropertyDescriptor){
        const fn=descriptor.value//把函数保存起来
        descriptor.value=function(){
            try{
                fn()
            }catch{
                console.log(mes)
            }
        }
     }
}

class Test{
    @TestDecorator('userInfo.name找不到')
    getName(){
         return userInfo.name
    }
    @TestDecorator('userInfo.age找不到')
    getAge(){
        return userInfo.age
    }
}
const test=new Test()
test.getName()//userInfo.name找不到
test.getAge()//userInfo.age找不到