typescript 中使用装饰器需启用 experimentaldecorators 和 emitdecoratormetadata,并确保 target ≥ es2015;类装饰器接收构造函数,方法装饰器操作 descriptor.value,参数与属性装饰器分别用于参数标记和字段初始化,执行顺序为类→方法/属性→参数。

在 TypeScript 中使用装饰器语法增强类和方法,需要先启用实验性装饰器支持,并理解其运行机制和适用场景。装饰器不是 ECMAScript 标准的一部分(截至 ES2023),属于 TypeScript 的实验特性,但已被广泛用于框架(如 Angular、NestJS)中。
开启装饰器支持
TypeScript 默认禁用装饰器,需手动配置:
- 在 tsconfig.json 中设置:
"experimentalDecorators": true(启用装饰器语法)
"emitDecoratorMetadata": true(可选,用于反射元数据,如依赖注入) - 确保 target 至少为 ES2015(因装饰器依赖 class 和 Reflect API)
- 若需运行时元数据操作(如 @Reflect.metadata),需引入 reflect-metadata polyfill(在入口文件顶部 import)
定义和使用类装饰器
类装饰器接收构造函数作为唯一参数,可用于修改类定义、添加静态属性或替换构造函数:
- 写法示例:
function sealed(constructor: any) {<br> Object.seal(constructor);<br> Object.seal(constructor.prototype);<br>}@sealed<br>class Person { ... } - 可返回新构造函数实现拦截或包装(注意:返回新构造函数会替换原类)
- 常用于框架级功能,如路由注册(@Controller)、单例标记等
定义和使用方法装饰器
方法装饰器接收三个参数:目标对象(类原型或构造函数)、方法名、属性描述符。适合做日志、权限校验、缓存等横切逻辑:
- 基础结构:
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {<br> const originalMethod = descriptor.value;<br> descriptor.value = function(...args: any[]) {<br> console.log(`Calling ${propertyKey} with`, args);<br> return originalMethod.apply(this, args);<br> };<br>} - 必须操作 descriptor.value 并重新赋值,否则不会生效
- 注意 this 指向和箭头函数限制:装饰器不适用于箭头函数方法(无独立函数上下文)
参数装饰器与属性装饰器
参数装饰器用于标记方法参数(常配合依赖注入),属性装饰器用于字段初始化或元数据标记:
- 参数装饰器签名:
(target: any, propertyKey: string | symbol, parameterIndex: number)
通常搭配 Reflect.defineMetadata 存储类型信息(如@Inject(HttpClient)) - 属性装饰器签名:
(target: any, propertyKey: string | symbol)
可用于自动初始化、响应式绑定(如 Vue Class Component)或验证(@Required) - 三者执行顺序固定:类装饰器 → 方法/访问器/属性装饰器 → 参数装饰器
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











