Typescript中的装饰器

2019-10-09

1 类装饰器

普通类装饰器

image

类装饰器传参

image

编译源码:=> 更好理解装饰器写法

装饰器封装

var __decorate = function (decorators, target, key, desc) {

      ...

      return Object.defineProperty(target, key, r)

      //这里对应(object,propertype,propertypeDeclaration)

};

//Object.defineProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性

function changeClass2(param) {

      return function (target) {

           target.prototype.title = param;

           target.prototype.add = function () {

                  console.log(‘add‘);

           };

      };

}

var DemoClass2 = /** @class */ (function () {

         function DemoClass2() {

         }

         DemoClass2 = __decorate([ //装饰器名字,目标类

              changeClass2(‘hello‘) //传入hello参数

         ], DemoClass2);

         return DemoClass2;//返回目标类

}());

修改构造函数的类装饰器

image

2 属性装饰器

image

注意:这里的target是指实例对象,而类装饰器指向的是类本身

3 方法装饰器

image

方法参数装饰器

image

4 装饰器执行顺序

装饰器可以同时使用多个因此需要知道其执行顺序

不同类型装饰器执行顺序:属性>方法>方法参数>类

在多个同类型的装饰器中的执行顺序 => 从后向前执行