TypeScript 装饰器教程：属性装饰器

引言

在 TypeScript 中，装饰器是一种特殊的语法，可以用来修改类、方法、属性或参数的行为。装饰器是一个函数，能够在运行时被附加到类的声明上。它们为我们提供了一种优雅的方式来实现元编程。本文将深入探讨属性装饰器的概念、用法、优缺点以及注意事项，并通过丰富的示例代码来帮助理解。

什么是属性装饰器？

属性装饰器是用于类属性的装饰器。它们可以用来添加元数据、修改属性的行为，或者在属性被访问或修改时执行特定的逻辑。属性装饰器的基本语法如下：

function PropertyDecorator(target: any, propertyKey: string) {
    // 装饰器逻辑
}

target：被装饰的类的原型对象。
propertyKey：被装饰的属性的名称。

示例：基本的属性装饰器

下面是一个简单的属性装饰器示例，它会在属性被访问时打印一条消息。

function LogPropertyAccess(target: any, propertyKey: string) {
    let value: any;

    const getter = () => {
        console.log(`Getting value of ${propertyKey}: ${value}`);
        return value;
    };

    const setter = (newValue: any) => {
        console.log(`Setting value of ${propertyKey} to ${newValue}`);
        value = newValue;
    };

    // 使用 Object.defineProperty 来定义 getter 和 setter
    Object.defineProperty(target, propertyKey, {
        get: getter,
        set: setter,
        enumerable: true,
        configurable: true,
    });
}

class Person {
    @LogPropertyAccess
    public name: string;

    constructor(name: string) {
        this.name = name;
    }
}

const person = new Person("Alice");
person.name = "Bob"; // Setting value of name to Bob
console.log(person.name); // Getting value of name: Bob

在这个示例中，我们定义了一个 LogPropertyAccess 装饰器，它会在属性被访问或修改时打印相应的消息。我们使用 Object.defineProperty 来定义 getter 和 setter，从而实现对属性的拦截。

属性装饰器的优点

代码重用：装饰器可以将通用的逻辑抽象出来，避免在多个类中重复编写相同的代码。
清晰的语法：使用装饰器可以使代码更具可读性，尤其是在需要添加元数据或修改行为时。
灵活性：装饰器可以在运行时动态地修改类的行为，提供了强大的元编程能力。

属性装饰器的缺点

性能开销：由于装饰器在运行时执行，可能会引入一定的性能开销，尤其是在频繁访问被装饰的属性时。
调试困难：使用装饰器可能会使调试变得更加复杂，因为装饰器的逻辑可能会隐藏在类的定义之外。
兼容性问题：装饰器是一个实验性特性，可能在未来的 TypeScript 版本中发生变化，导致代码不兼容。

注意事项

装饰器的顺序：如果一个属性有多个装饰器，它们的执行顺序是从上到下的。需要注意装饰器之间的相互影响。
装饰器的应用：装饰器只能应用于类的属性、方法、参数和类本身，不能应用于局部变量或函数。
TypeScript 配置：确保在 tsconfig.json 中启用 experimentalDecorators 选项，以便使用装饰器。

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

进阶示例：属性装饰器与验证

我们可以创建一个更复杂的属性装饰器，用于验证属性值的合法性。例如，创建一个装饰器来确保 age 属性的值在 0 到 120 之间。

function ValidateAge(target: any, propertyKey: string) {
    let value: number;

    const getter = () => value;

    const setter = (newValue: number) => {
        if (newValue < 0 || newValue > 120) {
            throw new Error(`Invalid value for ${propertyKey}: ${newValue}. Age must be between 0 and 120.`);
        }
        value = newValue;
    };

    Object.defineProperty(target, propertyKey, {
        get: getter,
        set: setter,
        enumerable: true,
        configurable: true,
    });
}

class User {
    @ValidateAge
    public age: number;

    constructor(age: number) {
        this.age = age;
    }
}

const user = new User(25);
console.log(user.age); // 25

user.age = 30; // 正常设置
console.log(user.age); // 30

try {
    user.age = 150; // 抛出错误
} catch (error) {
    console.error(error.message); // Invalid value for age: 150. Age must be between 0 and 120.
}

在这个示例中，ValidateAge 装饰器确保 age 属性的值在 0 到 120 之间。如果设置了无效的值，将抛出一个错误。

结论

属性装饰器是 TypeScript 中一个强大而灵活的特性，能够帮助我们在类的属性上添加元数据或修改其行为。通过合理使用属性装饰器，我们可以提高代码的可读性和可维护性。然而，使用装饰器时也需要注意性能开销和调试复杂性等问题。希望本文能够帮助你更好地理解和使用 TypeScript 的属性装饰器。