TypeScript基础-装饰器

南山隐士 2022年06月25日 21 0

装饰器

装饰器是实验性的特性, 它可以帮我们修改或者扩展某些类或者方法

配置

要使用装饰器, 我们需要在 tsconfig.json 中设置配置以下属性

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true
    }
}

class装饰器

// class装饰器, 扩展class属性
function test(params: any) {
  // 这里的target就是TestClass 类
  console.log(params)
  // 我们可以扩展类的属性
  params.prototype.age = 18
}

@test
class TestClass {
  constructor () {
  }
}

// 让我们创建一个实例看下
let YaoJin:any = new TestClass()
console.log(YaoJin.age)

装饰器工厂

// 装饰器工厂
function addAttr(params: string) {
// 这里的target 就是给装饰的类
  return function(target: any) {
    target.prototype.name = params
  }
}

@addAttr('YaoJin')
class Person {
  constructor() {

  }
}

let YaoJin1:any = new Person()
console.log(YaoJin1.name)

装饰器工厂, 就是一个函数可以接受参数, 这个参数, 最终可以使用到给装饰的类中

甚至,我们可以返回一个新的类,这个类继承给装饰的类

function changeClass (target:any) {
  return class extends target {
    name:any = 'YaoJin'
  }
}

@changeClass
class Person1 {
  constructor() {
  }
}

let person1 = new Person1()
console.log(person1)

这个例子中, 给装饰的类, 我们给它增加了一个name属性

属性装饰器

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

function logProperty(params:any){
        return function(target:any,attr:any){
            console.log(target);
            console.log(attr);
            target[attr]=params;
        }
    }
    @logClass('xxxx')
    class HttpClient{
        @logProperty('http://itying.com')
        public url:any |undefined;
        constructor(){
        }
        getData(){
            console.log(this.url);
        }
    }
    var http=new HttpClient();
    http.getData();

方法装饰器

它会被应用到方法的 属性描述符上,可以用来监视,修改或者替换方法定义。

方法装饰会在运行时传入下列3个参数:
1、对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。
2、成员的名字。
3、成员的属性描述符。

function play(params: any) {
  return function(target:any, methodName:any, desc:any) {
    console.log(params)
    console.log(target)
    console.log(methodName)
    console.log(desc)
    target.name = 'YaoJin'
    // 修改原方法的参数的类型
    var oMethod = desc.value;

    desc.value = function(...args:any[]){                
      args = args.map((value)=>{
        return String(value);
      })
      // 调用原方法,并将参数改变后的值传递进去
      oMethod.apply(this,args);
    }
  }
}


class Methods {
  constructor() {

  }
  @play('调动方法装饰器')
  getName(...args:any) {
    console.log(args)
  }
}
let funTest = new Methods()
funTest.getName(123, '1234') // ['123', '1234']
console.log(funTest)

方法参数装饰器

参数装饰器表达式会在运行时当作函数被调用,可以使用参数装饰器为类的原型增加一些元素数据 ,传入下列3个参数:

1、对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。
2、方法的名字。
3、参数在函数参数列表中的索引。

function logParams(params:any){

    return function(target:any,methodName:any,paramsIndex:any){

        console.log(params);

        console.log(target);

        console.log(methodName);

        console.log(paramsIndex);


        target.apiUrl=params;

    }   

}

class HttpClient{  
            public url:any |undefined;
            constructor(){
            }           
            getData(@logParams('xxxxx') uuid:any){               
                console.log(uuid);
            }
 }


 var http:any = new HttpClient();
 http.getData(123456);
console.log( http.apiUrl);

装饰器的执行顺序

属性》方法》方法参数》类

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

Last Updated: 2022/06/25 19:10:07
TypeScript基础-命名空间 computed和watch的区别