• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript 装饰器

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

装饰器(Decorators)可用来装饰类,属性,及方法,甚至是函数的参数,以改变和控制这些对象的表现,获得一些功能。

装饰器以 @expression 形式呈现在被装饰对象的前面或者上方,其中 expression 为一个函数,根据其所装饰的对象的不同,得到的入参也不同。

以下两种风格均是合法的:

@f @g x
@f
@g
x

ES 中装饰器处于 Stage 2 阶段 ,TypeScript 中通过开启相应编译开关来使用。

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

一个简单的示例

一个简单的示例,展示了 TypeScript 中如何编写和使用装饰器。

function log(
  _target: any,
  propertyKey: string,
  descriptor: PropertyDescriptor
) {
  const originalMethod = descriptor.value;
  descriptor.value = function() {
    console.log(`method ${propertyKey} called`);
    return originalMethod.apply(this, arguments);
  };
}

class Test {
  @log
  static sayHello() {
    console.log("hello");
  }
}

Test.sayHello();

上面的示例中,创建了名为 log 的方法,它将作为装饰器作用于类的方法上,在方法被调用时输出一条日志。作为装饰器的 log 函数其入参在后面会介绍。

执行结果:

method sayHello called
hello

装饰器的工厂方法

上面的装饰器比较呆板,设想我们想将它变得更加灵活和易于复用一些,则可以通过创建一个工厂方法来实现。因为本质上装饰器就是个普通函数,函数可通过另外的函数来创建和返回,同时装饰器的使用本质上也是一个函数调用。通过传递给工厂方法不同的参数,以获得不同表现的装饰器。

function logFactory(prefix: string) {
  return function log(
    _target: any,
    propertyKey: string,
    descriptor: PropertyDescriptor
  ) {
    const originalMethod = descriptor.value;
    descriptor.value = function() {
      console.log(`method ${propertyKey} called`);
      return originalMethod.apply(this, arguments);
    };
  };
}

class Test {
  @logFactory("[debug]")
  static sayHello() {
    console.log("hello");
  }
  @logFactory("[info]")
  static sum() {
    return 1 + 1;
  }
}

Test.sayHello();
Test.sum();

执行结果:

[debug] method sayHello called
hello
[info] method sum called

多个装饰器

多个装饰器可同时作用于同一对象,按顺序书写出需要运用的装饰器即可。其求值(evaluate)和真正被执行(call)的顺序是反向的。即,排在前面的先求值,排在最后的先执行。

譬如,

function f() {
  console.log("f(): evaluated");
  return function(target, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log("f(): called");
  };
}

function g() {
  console.log("g(): evaluated");
  return function(target, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log("g(): called");
  };
}

class C {
  @f()
  @g()
  method() {}
}

求值 的过程就体现在装饰器可能并不直接是一个可调用的函数,而是一个工厂方法或其他表达式,只有在这个工厂方法或表达式被求值后,才得到真正被调用的装饰器。

所以在这个示例中,先依次对 f() g() 求值,再从 g() 开始执行到 f()

运行结果:

f(): evaluated
g(): evaluated
g(): called
f(): called

不同类型的装饰器

类的装饰器

作用于类(Class)上的装饰器,用于修改类的一些属性。如果装饰器有返回值,该返回值将替换掉该类的声明而作为新的构造器使用。

装饰器入参:

  • 类的构造器。

示例:

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

@sealed 将类进行密封,将无法再向类添加属性,同时类上属性也变成不可配置的(non-configurable)。

另一个示例:

function classDecorator<T extends { new (...args: any[]): {} }>(
  constructor: T
) {
  return class extends constructor {
    newProperty = "new property";
    hello = "override";
  };
}

@classDecorator
class Greeter {
  property = "property";
  hello: string;
  constructor(m: string) {
    this.hello = m;
  }
}

console.log(new Greeter("world"));

因为 @classDecorator 中有返回值,这个值将替换本来类的定义,当 new 的时候,使用的是装饰器中返回的构造器来创建类。

方法的装饰器

装饰器作用于类的方法时可用于观察,修改或替换该方法。如果装饰器有返回值,将替换掉被作用方法的属性描述器(roperty Descriptor)。

装饰器入参依次为:

  • 作用于静态方法时为类的构造器,实例方法时为类的原型(prototype)。
  • 被作用的方法的名称。
  • 被作用对象的属性描述器。

示例:

function enumerable(value: boolean) {
  return function(
    target: any,
    propertyKey: string,
    descriptor: PropertyDescriptor
  ) {
    descriptor.enumerable = value;
  };
}

class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }

  @enumerable(false)
  greet() {
    return "Hello, " + this.greeting;
  }
}

上面示例中 @enumerable 改变了被装饰方法的 enumerable 属性,控制其是否可枚举。

类的方法可以是设置器(setter)或获取器(getter)。当两者成对出现时,应当只对其中一个运用装饰器,谁先出现就用在谁身上。因为装饰器应用时是用在 getset 两者合并的属性描述器上的。

class Test {
  private _foo = 1;
  @logFactory("[info]")
  get foo() {
    return this._foo;
  }
  //            
                

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript: type alias 与 interface发布时间:2022-07-18
下一篇:
typescript 基本数据类型发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap