如何使用 TypeScript 创建和使用装饰器？

TypeScript面试题 0 62

在TypeScript中使用装饰器需要理解装饰器的基本概念以及如何应用它们。装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、访问器、属性或参数上。装饰器使用@expression形式，其中expression必须求值为一个函数，该函数在运行时被调用，被装饰的声明信息作为参数传递给它。

启用装饰器

首先，确保在tsconfig.json中启用了装饰器：

{
  "compilerOptions": {
    "target": "ES5", // 装饰器需要ES5或更高版本
    "experimentalDecorators": true // 启用装饰器
  }
}

创建装饰器

装饰器本质上是函数，以下是各种装饰器的创建方法：

类装饰器

类装饰器应用于类构造函数，可以用来监视、修改或替换类定义。

function sealed(constructor: Function) {
    console.log('Sealing the constructor');
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

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

方法装饰器

方法装饰器应用于方法的属性描述符，可以用来监视、修改或替换方法定义。

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

访问器装饰器

访问器装饰器应用于访问器的属性描述符，与方法装饰器类似。

属性装饰器

属性装饰器应用于类的属性，不能用于监视属性的读写操作，但可以用于添加元数据。

function format(formatString: string) {
    return function (target: any, propertyKey: string) {
        // 在这里可以存储或使用formatString和target, propertyKey
    };
}

class Greeter {
    @format("Hello, %s")
    greeting: string;

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

参数装饰器

参数装饰器应用于类构造函数或方法的参数。

function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
    // 在这里可以标记为必需的参数
}

class Greeter {
    greeting: string;

    constructor(@required message: string) {
        this.greeting = message;
    }
}

使用装饰器

如上所示，装饰器通过在声明前添加@装饰器名称来使用。装饰器是一种高级特性，它们在TypeScript中使得元编程成为可能，能够在运行时改变类、方法、属性的行为。

请注意，装饰器目前是TypeScript的一个实验性特性，并且其提案在ECMAScript标准化过程中还在变化。因此，它们的行为在将来可能会发生变化。在使用装饰器时应当考虑到这一点。