面试题：TypeScript类装饰器中工厂函数的实现原理

Question

请详细阐述在TypeScript类装饰器中，工厂函数是如何工作的，它与普通装饰器有什么区别，并给出一个简单的工厂函数作为类装饰器的示例代码。

Answer 1

1. 工厂函数在TypeScript类装饰器中的工作原理

• 类装饰器工厂函数是一个返回实际装饰器函数的函数。它允许在装饰器应用时传入参数，这使得装饰器更加灵活。
• 当使用类装饰器工厂函数时，先调用工厂函数并传入参数，工厂函数返回一个装饰器函数，然后这个返回的装饰器函数作用于目标类。

2. 与普通装饰器的区别

• 普通装饰器：直接定义一个函数，该函数接收目标类的构造函数作为参数并对其进行操作。它不能接受外部传入的参数，灵活性相对较低。
• 工厂函数装饰器：可以接受参数，通过这些参数在运行时定制装饰器的行为，增加了装饰器的复用性和灵活性。

3. 示例代码

// 类装饰器工厂函数
function classDecoratorFactory(param: string) {
    return function <T extends { new (...args: any[]): {} }>(target: T) {
        return class extends target {
            constructor(...args: any[]) {
                super(...args);
                console.log(`装饰器工厂函数参数: ${param}`);
            }
        };
    };
}

// 使用类装饰器工厂函数
@classDecoratorFactory('示例参数')
class MyClass {
    constructor() {
        console.log('MyClass实例化');
    }
}

const myClassInstance = new MyClass();

这段代码中，classDecoratorFactory是一个类装饰器工厂函数，它接收一个参数param。返回的内部函数才是实际的类装饰器，它返回一个新的类，这个新类继承自目标类target，并在构造函数中打印出传入工厂函数的参数。