使用 TypeScript 从零搭建自己的 Web 框架：探索装饰器与反射 API
在进行更复杂的 IoC 容器和依赖注入的实现之前，我们需要对 TypeScript 的一些高级特性进行一些了解。TypeScript 作为一种支持静态类型、面向对象的编程语言，为我们提供了构建自定义 Web 框架的强大工具。特别是其装饰器和反射 API，为框架的构建提供了极大的灵活性。
一、装饰器：为代码添加额外逻辑
装饰器是 TypeScript 提供的一种声明式方式，可以在不修改原有代码的情况下，向类、方法、属性或参数添加额外的逻辑。装饰器通过 @expression 的形式附加到目标上，并在编译时执行相应的函数。
- 类装饰器：用于修改类的行为。类装饰器接收一个构造函数作为参数，并可以在运行时对其进行修改或添加额外的属性。
function classDecorator(constructor: Function) {
// 修改或记录类的行为
}
@classDecorator
class MyClass {
// ...
}
- 方法装饰器：用于修改类的方法。方法装饰器接收三个参数：类的原型、方法名和描述符对象。通过修改描述符对象，我们可以改变方法的行为。
function methodDecorator(target: any, propertyKey: string | symbol, descriptor: PropertyDescriptor) {
// 修改方法的执行逻辑
}
class MyClass {
@methodDecorator
myMethod() {
// ...
}
}
- 属性装饰器：用于为类的属性添加额外的元数据或执行一些副作用。
function propertyDecorator(target: Object, propertyKey: string | symbol) {
// 为属性添加元数据
}
class MyClass {
@propertyDecorator
myProperty: string;
}
- 参数装饰器：用于为方法的参数添加元数据或执行额外的逻辑。
function parameterDecorator(target: Object, propertyName: string | symbol, index: number) {
// 为参数添加元数据或逻辑
}
class MyService {
myMethod(@parameterDecorator param: any) {
// ...
}
}
二、反射 API：运行时获取和操作对象
TypeScript 的反射 API 提供了在运行时获取和操作对象的能力，使得我们可以动态地查询和修改对象的元数据。
-
Reflect.defineMetadata：用于定义元数据。
const metadataKey = 'myMetadata';
const metadataValue = 'some value';
Reflect.defineMetadata(metadataKey, metadataValue, target, propertyKey);
-
Reflect.getMetadata：用于检索已定义的元数据。
const retrievedValue = Reflect.getMetadata(metadataKey, target, propertyKey);
-
Reflect.hasMetadata：用于检查是否存在元数据。
const hasMetadata = Reflect.hasMetadata(metadataKey, target, propertyKey);
-
Reflect.deleteMetadata：用于删除已定义的元数据。
Reflect.deleteMetadata(metadataKey, target, propertyKey);
-
Reflect.construct: 用于使用指定的构造函数和一组参数来创建对象实例
Reflect.construct(target, argumentsList[, newTarget]);
三、案例 创建一个带有日志功能的类，并使用反射 API 动态创建实例
首先，我们定义一个类装饰器Loggable，它会在类实例化时添加日志功能。
function Loggable(constructor: Function) {
return class extends constructor {
constructor(...args: any[]) {
super(...args);
console.log(`Creating an instance of ${constructor.name}`);
}
};
}
@Loggable
class MyClass {
constructor(public name: string) {
// MyClass的构造函数
}
greet() {
console.log(`Hello, ${this.name}!`);
}
}
Loggable装饰器接收一个构造函数作为参数，并返回一个新的类，这个新类继承自原始的类，并添加了日志功能。
接下来，我们介绍反射 API 中的Reflect.construct方法。Reflect.construct方法允许我们使用指定的构造函数和一组参数来创建对象实例。它类似于使用new关键字，但Reflect.construct是一个函数，因此它可以在任何可以调用函数的地方使用，并且可以被拦截或覆盖。
// 使用 new 关键字创建 MyClass 的实例
const instance = new MyClass('Alice'); // 输出: Creating an instance of MyClass
instance.greet(); // 输出: Hello, Alice!
// 使用 Reflect.construct 动态创建 MyClass 的实例
const newInstance = Reflect.construct(MyClass, ['Bob']);
newInstance.greet(); // 输出: Hello, Bob!
// 验证 newInstance 是否是 MyClass 的实例
console.log(newInstance instanceof MyClass); // 输出: true
在这个例子中，我们使用Reflect.construct方法而不是new关键字来创建MyClass的实例。我们传递了MyClass构造函数和一个包含参数['Alice']的数组给Reflect.construct方法。该方法会返回新创建的MyClass实例，然后我们可以像常规实例一样调用其方法。
Reflect.construct的第一个参数是目标构造函数，第二个参数是一个数组，包含了传递给构造函数的参数。Reflect.construct在内部执行了与new关键字相同的操作，但它允许我们以一种更加灵活和可拦截的方式创建对象实例。
完整示例
下面是这个案例的完整代码：
function Loggable(constructor: Function) {
return class extends constructor {
constructor(...args: any[]) {
super(...args);
console.log(`Creating an instance of ${constructor.name}`);
}
};
}
@Loggable
class MyClass {
constructor(public name: string) {
// MyClass的构造函数
}
greet() {
console.log(`Hello, ${this.name}!`);
}
}
// 使用 new 关键字创建 MyClass 的实例
const instance = new MyClass('Alice'); // 输出: Creating an instance of MyClass
instance.greet(); // 输出: Hello, Alice!
// 使用 Reflect.construct 动态创建 MyClass 的实例
const newInstance = Reflect.construct(MyClass, ['Bob']);
newInstance.greet(); // 输出: Hello, Bob!
// 验证 newInstance 是否是 MyClass 的实例
console.log(newInstance instanceof MyClass); // 输出: true
这个案例展示了装饰器如何用来动态地修改类的行为，以及Reflect.construct方法如何用来以编程方式创建类的实例。这种技术特别适用于需要高度灵活性和可配置性的框架或库的开发中。
四、总结
通过装饰器，我们可以在不修改原有代码的情况下向类、方法、属性或参数添加额外的逻辑；通过反射 API，我们可以在运行时获取和操作对象的元数据。结合这些特性，我们可以构建出高度定制化的 Web 框架，以满足特定需求。