TypeScript 中的装饰器及其使用方法-JavaScript中文网-JavaScript教程资源分享门户

在 TypeScript 中，装饰器是一种特殊的语法，它允许我们在类、方法、属性等各种类型的声明前面增加注解，来标明这些声明的特殊含义。装饰器在 TypeScript 中的使用非常广泛，可以用来实现诸如依赖注入、响应式编程等高级特性。本文将为大家详细介绍 TypeScript 中的装饰器及其常见用法。

装饰器的种类

在 TypeScript 中，装饰器可以被用于以下场景：

类装饰器：用来装饰类声明。
属性装饰器：用来装饰类的属性。
方法装饰器：用来装饰类的方法。
参数装饰器：用来装饰方法的参数。

类装饰器

类装饰器会在声明一个类时被调用。它们可以被用来拓展类的行为，或者修改类的元数据。一个类装饰器的声明如下所示：

// javascriptcn.com 代码示例
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;
    }
}

在上面的示例中，我们声明了一个类装饰器 classDecorator，该装饰器会向类添加一个新属性 newProperty 和一个新的方法 hello。然后，我们在类声明处使用了 @classDecorator 装饰器，这就使得 Greeter 类被 classDecorator 装饰器所修改。

属性装饰器

属性装饰器会在声明一个类的属性时被调用。它们可以被用来拓展属性的行为，或者修改属性的元数据。一个属性装饰器的声明如下所示：

function propertyDecorator(target: Object, propertyKey: string | symbol) {
    console.log("propertyDecorator called on: ", target, propertyKey);
}

class MyClass {
    @propertyDecorator
    name: string;
}

在上面的示例中，我们声明了一个属性装饰器 propertyDecorator，该装饰器会在 MyClass 类的 name 属性上被调用，并输出调用信息。

方法装饰器

方法装饰器会在声明一个类的方法时被调用。它们可以被用来拓展方法的行为，或者修改方法的元数据。一个方法装饰器的声明如下所示：

function methodDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log("methodDecorator called on: ", target, propertyKey, descriptor);
}

class MyClass {
    @methodDecorator
    myMethod() {}
}

在上面的示例中，我们声明了一个方法装饰器 methodDecorator，该装饰器会在 MyClass 类的 myMethod 方法上被调用，并输出调用信息。

参数装饰器

参数装饰器会在声明一个方法的参数时被调用。它们可以被用来拓展方法参数的行为，或者修改方法参数的元数据。一个参数装饰器的声明如下所示：

function parameterDecorator(target: Object, propertyKey: string | symbol, parameterIndex: number) {
    console.log("parameterDecorator called on: ", target, propertyKey, parameterIndex);
}

class MyClass {
    myMethod(@parameterDecorator a: number, @parameterDecorator b: string) {}
}

在上面的示例中，我们声明了一个参数装饰器 parameterDecorator，该装饰器会在 MyClass 类的 myMethod 方法的每个参数上被调用，并输出调用信息。

总结

通过本文的介绍，我们了解了 TypeScript 中的装饰器是如何应用于类、属性、方法和参数上的。它们既可以用来拓展语言本身的特性，又可以用来实现复杂的功能，如依赖注入、响应式编程等。在实际开发中，我们可以灵活运用装饰器，来实现更高效、更优雅的代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652f55147d4982a6eb071551