乐趣区

关于前端:现代TypeScript高级教程装饰器与反射元数据

jiezi
点击在线浏览，体验更好 链接
古代 JavaScript 高级小册 链接
深入浅出 Dart 链接
古代 TypeScript 高级小册 链接

装璜器与反射元数据

介绍

在过来的几年中，JavaScript 及其生态系统产生了疾速的变动。其中，TypeScript 已成为许多开发人员的首选语言。其次要劣势在于其动态类型零碎，它使咱们能够在编译时捕捉谬误，而不是在运行时。除此之外，TypeScript 还为咱们提供了许多 ES6+ 个性以及一些其余的独有个性，例如枚举、命名空间和装璜器。

装璜器简介

在 TypeScript 中，装璜器是一种非凡类型的申明，能够被附加到类申明，办法，属性，拜访器或参数上。装璜器的核心思想是加强曾经存在的类、办法、属性等的行为，或者增加新的行为。通过装璜器，咱们能够在不扭转原始类的定义的状况下，为类增加新的个性。

在 TypeScript 中，装璜器应用 @expression 的模式。其中，expression必须为一个返回函数的表达式，这个函数在运行时会被调用，传入相干的装璜器参数。

TypeScript 反对以下几种类型的装璜器：

  • 类装璜器
  • 办法装璜器
  • 拜访器装璜器
  • 属性装璜器
  • 参数装璜器

类装璜器

类装璜器利用于类的构造函数，用于察看、批改或替换类定义。类装璜器在利用时，会作为函数调用，并将构造函数作为其惟一的参数。

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

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

办法装璜器

办法装璜器利用于办法的属性描述符，并能够用于察看、批改或替换办法定义。当装璜器被调用时，它会接管到三个参数：以后类的原型，办法名，以及该办法的属性描述符。

function Log(target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<any>) {
    let originalMethod = descriptor.value; // 保留原始函数
    descriptor.value = function (...args: any[]) {console.log("Arguments:", JSON.stringify(args));
        let result = originalMethod.apply(this, args);
       

 console.log("Result:", result);
        return result;
    }
}

class Calculator {
    @Log
    add(x: number, y: number): number {return x + y;}
}

拜访器装璜器

拜访器装璜器能够利用于拜访器的属性描述符，并能够用于察看、批改或替换拜访器的定义。拜访器装璜器和办法装璜器有类似的语法。

function ReadOnly(target: any, key: string, descriptor: PropertyDescriptor) {
    descriptor.writable = false;
    return descriptor;
}

class Circle {
    private _radius: number;

    constructor(radius: number) {this._radius = radius;}

    @ReadOnly
    get radius() {return this._radius;}
}

装璜器与反射元数据

为了让装璜器可能更好地工作，TypeScript 提供了反射元数据 API。这是一个实验性的 API，它容许装璜器在申明时增加元数据。能够应用 npm 来装置反射元数据 API：

反射元数据（Reflect Metadata）是一个实验性的 API，用于在申明装璜器时执行元数据类型注解和元数据反射。

npm install reflect-metadata --save

而后，你须要在全局范畴内导入反射 API:

import "reflect-metadata";

在 TypeScript 配置文件 tsconfig.json 中，你须要开启 emitDecoratorMetadata 选项:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ES5",
    "module": "commonjs"
  }
}

而后你就能够在装璜器中应用反射 API 了:

function logType(target : any, key : string) {var t = Reflect.getMetadata("design:type", target, key);
  console.log(`${key} type: ${t.name}`);
}

class Demo{ 
  @logType
  public attr1 : string;
}

以上就是装璜器的基本原理与利用。装璜器能够使咱们的代码更简洁，更易读，也使得咱们的代码更易于治理和保护。然而，须要留神的是，装璜器目前还处于试验阶段，如果你决定在生产环境中应用装璜器，你须要理解应用装璜器可能带来的危险。

论断

TypeScript 的装璜器为咱们提供了一种弱小的工具，能够在运行时扭转类的行为。通过了解装璜器的工作原理，咱们能够发明更加弱小、灵便且易于保护的利用。

退出移动版