面试题：TypeScript装饰器中类装饰器的基本使用及原理

Question

请简述TypeScript中类装饰器的语法和作用，并通过代码示例展示如何使用类装饰器为一个类添加额外的属性或方法，同时解释该装饰器的工作原理。

Answer 1

类装饰器语法

在TypeScript中，类装饰器是一个函数，它接收一个目标类的构造函数作为参数。语法如下：

function classDecorator(target: Function) {
    // 装饰器逻辑
}

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

类装饰器作用

类装饰器主要用于在类定义时对类进行修改，比如添加新的属性、方法，修改类的行为，或者对类进行一些元数据的设置等。它为开发者提供了一种在不修改类的原始代码的情况下，扩展类功能的方式。

代码示例 - 添加额外属性和方法

function addExtraMembers(target: Function) {
    target.prototype.extraProperty = 'This is an extra property';
    target.prototype.extraMethod = function() {
        console.log('This is an extra method');
    };
}

@addExtraMembers
class MyClass {
    constructor() {}
}

const myInstance = new MyClass();
console.log(myInstance.extraProperty); 
myInstance.extraMethod(); 

装饰器工作原理

1. 调用时机：当类定义被解析时，装饰器函数会被立即调用。
2. 参数传递：装饰器函数接收类的构造函数作为参数。在上述示例中，addExtraMembers 函数接收 MyClass 的构造函数 target。
3. 修改类：通过操作 target，可以对类进行各种修改。例如，在示例中通过 target.prototype 为类的实例添加了新的属性 extraProperty 和方法 extraMethod。这意味着所有通过该类创建的实例都将拥有这些新添加的成员。