TypeScript 5.0 装饰器实战

T

TS架构师

4天前

TypeScript 5.0 装饰器实战

TypeScript装饰器最佳实践

TypeScript 5.0 装饰器完全指南

TypeScript 5.0 正式支持 ECMAScript 装饰器提案，这是一个期待已久的特性。

1. 基础语法

typescript
function logged(target: any, context: ClassMethodDecoratorContext) {


return function (...args: any[]) {
console.log(调用方法: ${String(context.name)})
return target.apply(this, args)
}
}




class Calculator {
@logged
add(a: number, b: number) {
return a + b
}
}

2. 类装饰器

typescript
function sealed(constructor: Function) {


Object.seal(constructor)
Object.seal(constructor.prototype)
}




@sealed
class BankAccount {
balance = 0
}

3. 属性装饰器

typescript
function observable(target: undefined, context: ClassFieldDecoratorContext) {


return function (initialValue: T) {
console.log(初始化属性: ${String(context.name)})
return initialValue
}
}

4. 实战：依赖注入

typescript
const container = new Map()


function injectable(target: any) {
container.set(target.name, new target())
}




function inject(serviceKey: string) {
return function (target: any, context: ClassFieldDecoratorContext) {
return () => container.get(serviceKey)
}
}

迁移建议

旧版实验性装饰器需要迁移到新语法，建议逐步替换。

2.9k 阅读