装饰器详解
00:00
TypeScript装饰器与元编程
1. 装饰器概述
{ "compilerOptions": { "experimentalDecorators": true, "emitDecoratorMetadata": true } }
2. 类装饰器
function LogClass(target: Function) {
console.log(`类 ${target.name} 被创建`);
}
@LogClass
class MyClass {}
// 工厂装饰器
function sealed(constructor: Function) {
Object.seal(constructor);
Object.seal(constructor.prototype);
}
3. 方法装饰器
function Log(target: any, key: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`调用 ${key},参数: ${args}`);
return original.apply(this, args);
};
}
class Calculator {
@Log
add(a: number, b: number) {
return a + b;
}
}
4. 属性装饰器
function DefaultValue(value: any) {
return function (target: any, key: string) {
Object.defineProperty(target, key, {
value,
writable: true,
enumerable: true,
});
};
}
class User {
@DefaultValue('Anonymous')
name: string;
}
5. 参数装饰器
function Required(target: any, key: string, index: number) {
const requiredParams: number[] = Reflect.getMetadata('required', target, key) || [];
requiredParams.push(index);
Reflect.defineMetadata('required', requiredParams, target, key);
}
6. TC39 Stage 3 装饰器(新标准)
// 新装饰器语法(TS 5.0+)
function logged(originalMethod: any, context: ClassMethodDecoratorContext) {
return function (this: any, ...args: any[]) {
console.log(`调用 ${String(context.name)}`);
return originalMethod.call(this, ...args);
};
}
class MyClass {
@logged
method() {}
}