• 作者:老汪软件技巧
  • 发表时间:2024-11-04 07:01
  • 浏览量:

装饰器本质上是一个函数,在运行时被调用。

要启用对装饰器的实验性支持,您必须在命令行或 tsconfig.json中启用 experimentalDecorators 编译器选项:

命令行:

tsc --target ES5 --experimentalDecorators

tsconfig.json:

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

类装饰器

装饰器应用于类的构造函数,可用于观察、修改或替换类定义。

类装饰器的表达式将在运行时作为函数调用,类的构造函数作为其唯一参数。

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}
@sealed
class BugReport {
  type = "report";
  title: string;
  constructor(t: string) {
    this.title = t;
  }
}

如果类装饰器返回一个值,它将用提供的构造函数替换原类:

function reportableClassDecorator<T extends { new (...args: any[]): {} }>(constructor: T) {
  return class extends constructor {
    reportingURL = "http://www...";
  };
}
@reportableClassDecorator
class BugReport {
  type = "report";
  title: string;
  constructor(t: string) {
    this.title = t;
  }
}
const bug = new BugReport("Needs dark mode");
console.log(bug.title); // Prints "Needs dark mode"
console.log(bug.type); // Prints "report"
注意 如果您选择返回一个新的构造函数,您必须注意维护原始原型。在运行时应用装饰器的逻辑不会为您执行此
操作。

方法装饰器

方法装饰器应用于方法的属性描述符,可用于观察、修改或替换方法定义。

方法装饰器将在运行时作为函数调用,并带有以下三个参数:

如果方法装饰器返回一个值,它将用作该方法的属性描述符。

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;
  }
}

属性装饰器

属性装饰器的表达式将在运行时作为函数调用,并带有以下两个参数:


上一条 查看详情 +没有了
下一条 查看详情 +没有了