TypeScript装饰器入门：类装饰器的基本用法

一、TypeScript装饰器概述

在TypeScript中，装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、属性或参数上，用于对这些目标进行元编程。简单来说，装饰器提供了一种方式，可以在不改变目标对象核心逻辑的前提下，为其添加额外的行为或修改其特性。装饰器本质上是一个函数，它接收目标作为参数，并可以返回一个新的目标或对原目标进行修改。

装饰器在ES6中并没有原生支持，但是TypeScript通过实验性的特性引入了它。在使用装饰器之前，需要在tsconfig.json文件中开启experimentalDecorators选项。

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

二、类装饰器的定义

类装饰器是应用于类声明的装饰器。它的定义形式是一个函数，该函数接收类的构造函数作为参数。如果装饰器返回一个值，那么这个值将被用来替换原有的类构造函数。

类装饰器的基本语法如下：

function classDecorator(target: Function) {
    // 对类进行操作
}

@classDecorator
class MyClass {
    // 类的定义
}

在上述代码中，classDecorator就是一个类装饰器，@classDecorator语法将这个装饰器应用到了MyClass类上。当MyClass类被定义时，classDecorator函数就会被调用，并且target参数就是MyClass类的构造函数。

三、类装饰器的基本用法

（一）日志记录

类装饰器的一个常见用途是在类的实例化过程中添加日志记录。通过这种方式，我们可以追踪类何时被实例化，这在调试和性能分析时非常有用。

function logClass(target: Function) {
    console.log(`Class ${target.name} has been instantiated`);
    return target;
}

@logClass
class User {
    constructor(public name: string) {}
}

const user = new User('John');

在上述代码中，logClass是一个类装饰器。当User类被实例化时，logClass装饰器中的console.log语句会输出类名，表明该类已被实例化。

（二）修改类的行为

类装饰器还可以用来修改类的行为。例如，我们可以通过装饰器为类添加新的属性或方法。

function addMethod(target: Function) {
    target.prototype.sayHello = function () {
        console.log(`Hello, I'm an instance of ${this.constructor.name}`);
    };
    return target;
}

@addMethod
class Animal {
    constructor(public species: string) {}
}

const animal = new Animal('Dog');
(animal as any).sayHello();

在这段代码中，addMethod装饰器为Animal类的原型添加了一个sayHello方法。当Animal类被实例化后，通过类型断言，我们可以调用这个新添加的方法。

（三）实现单例模式

单例模式是一种常见的设计模式，它确保一个类只有一个实例，并提供一个全局访问点。利用类装饰器，我们可以很方便地将一个普通类转换为单例类。

function singleton(target: Function) {
    let instance: any;
    return function () {
        if (!instance) {
            instance = new target();
        }
        return instance;
    };
}

@singleton
class Database {
    private constructor() {}
    query(sql: string) {
        console.log(`Executing query: ${sql}`);
    }
}

const db1 = Database();
const db2 = Database();
console.log(db1 === db2); // true

在上述代码中，singleton装饰器返回了一个新的函数。这个函数在第一次调用时创建Database类的实例，并在后续调用时返回同一个实例，从而实现了单例模式。

四、类装饰器的执行时机

类装饰器在类定义时就会被执行，而不是在类实例化时。这意味着无论类是否被实例化，装饰器中的逻辑都会先于类的使用而执行。

function earlyLog(target: Function) {
    console.log('This is logged when the class is defined');
    return target;
}

@earlyLog
class Logger {
    constructor() {
        console.log('This is logged when the class is instantiated');
    }
}

// 即使没有实例化Logger类，earlyLog装饰器中的日志也会输出

在上述代码中，earlyLog装饰器中的日志会在Logger类定义时就输出，而Logger类构造函数中的日志只有在Logger类被实例化时才会输出。

五、多个类装饰器的应用

在TypeScript中，一个类可以应用多个装饰器。这些装饰器会按照从顶到下的顺序依次执行。

function firstDecorator(target: Function) {
    console.log('First decorator executed');
    return target;
}

function secondDecorator(target: Function) {
    console.log('Second decorator executed');
    return target;
}

@firstDecorator
@secondDecorator
class MultiDecorated {
    // 类定义
}

在上述代码中，secondDecorator会先执行，然后firstDecorator再执行。这是因为装饰器的应用顺序与它们在类声明前的书写顺序相反。

六、类装饰器的返回值

类装饰器可以返回一个值，这个返回值将替换原有的类构造函数。这使得我们可以在不改变类定义的情况下，对类的构造逻辑进行修改。

function modifyConstructor(target: Function) {
    return class extends target {
        constructor(...args: any[]) {
            super(...args);
            console.log('Constructor has been modified');
        }
    };
}

@modifyConstructor
class Original {
    constructor() {}
}

const modified = new Original();

在上述代码中，modifyConstructor装饰器返回了一个新的类，这个类继承自原有的Original类，并在构造函数中添加了额外的日志输出。当Original类被实例化时，实际上执行的是装饰器返回的新类的构造函数。

七、类装饰器与继承

当一个类使用了类装饰器并且被其他类继承时，装饰器的效果会传递到子类。

function logInheritance(target: Function) {
    console.log(`Class ${target.name} is being extended`);
    return target;
}

@logInheritance
class Base {
    constructor() {}
}

class Derived extends Base {
    constructor() {
        super();
    }
}

在上述代码中，当Derived类继承Base类时，logInheritance装饰器中的日志会输出，表明Base类正在被继承。这说明类装饰器的逻辑对于继承体系中的类同样有效。

八、类装饰器的局限性

虽然类装饰器非常强大，但它也有一些局限性。

兼容性：装饰器是TypeScript的实验性特性，在不同的JavaScript运行环境中可能存在兼容性问题。特别是在一些较旧的浏览器或Node.js版本中，可能无法直接使用装饰器。
调试难度：由于装饰器逻辑在类定义时就执行，并且可能改变类的结构，这可能会增加调试的难度。当出现问题时，定位问题的根源可能会更加复杂。
性能影响：虽然装饰器带来的性能开销通常较小，但在一些性能敏感的应用场景中，过多地使用装饰器可能会对性能产生一定的影响。尤其是在装饰器中执行复杂逻辑或频繁创建新对象时。

九、在实际项目中使用类装饰器的建议

适度使用：避免过度依赖装饰器，只有在真正需要为类添加额外行为或修改类特性时才使用。过多的装饰器可能会使代码难以理解和维护。
保持简单：装饰器中的逻辑应该尽量简单，避免在装饰器中执行复杂的业务逻辑。如果逻辑过于复杂，可以考虑将其拆分成独立的函数或模块。
文档化：为使用的装饰器添加详细的文档，说明装饰器的作用、参数以及可能的副作用。这有助于其他开发人员理解和维护代码。

十、结合其他设计模式使用类装饰器

类装饰器可以与其他设计模式很好地结合，以实现更强大和灵活的功能。

（一）与代理模式结合

代理模式是为其他对象提供一种代理以控制对这个对象的访问。通过类装饰器，我们可以很方便地为一个类创建代理。

function proxyDecorator(target: Function) {
    return new Proxy(target, {
        construct(target, args) {
            console.log('Proxying class instantiation');
            return new target(...args);
        }
    });
}

@proxyDecorator
class Service {
    constructor() {}
    performTask() {
        console.log('Performing task');
    }
}

const service = new Service();
service.performTask();

在上述代码中，proxyDecorator装饰器使用Proxy为Service类创建了一个代理。在类实例化时，代理会输出日志，并且代理对象可以对后续的方法调用进行拦截和处理。

（二）与策略模式结合

策略模式定义了一系列算法，将每个算法都封装起来，并且使它们之间可以互换。类装饰器可以用来动态地为类选择不同的策略。

interface Strategy {
    execute(): void;
}

class StrategyA implements Strategy {
    execute() {
        console.log('Executing Strategy A');
    }
}

class StrategyB implements Strategy {
    execute() {
        console.log('Executing Strategy B');
    }
}

function strategyDecorator(strategy: Strategy) {
    return function (target: Function) {
        target.prototype.executeStrategy = function () {
            strategy.execute();
        };
        return target;
    };
}

@strategyDecorator(new StrategyA())
class Context {
    constructor() {}
}

const context = new Context();
(context as any).executeStrategy();

在上述代码中，strategyDecorator装饰器根据传入的不同策略对象，为Context类添加了不同的executeStrategy方法。这样，通过改变装饰器的参数，就可以为Context类动态地选择不同的策略。

十一、总结类装饰器的核心要点

定义与语法：类装饰器是一个函数，接收类的构造函数作为参数，使用@符号应用到类声明上。
用途广泛：可以用于日志记录、修改类行为、实现设计模式等多种场景。
执行时机：在类定义时执行，而不是实例化时。
返回值：可以返回一个新的构造函数来替换原有的类构造函数。
注意事项：存在兼容性、调试难度和性能等方面的局限性，在实际项目中应适度使用并做好文档化。

通过深入理解和合理运用类装饰器，我们可以在TypeScript项目中实现更加灵活和可维护的代码结构，提升开发效率和代码质量。同时，随着JavaScript和TypeScript的不断发展，装饰器的功能和稳定性也有望得到进一步的提升。