TypeScript系列教程十一《装饰器》 -- reflect-metadata

let result = Reflect.getMetadataKeys(target);

let result = Reflect.getMetadataKeys(target, propertyKey);

// 获取对象或属性上所有自带的源数据 keys

let result = Reflect.getOwnMetadataKeys(target);

let result = Reflect.getOwnMetadataKeys(target, propertyKey);

// 在对象或属性上删除源数据

let result = Reflect.deleteMetadata(metadataKey, target);

let result = Reflect.deleteMetadata(metadataKey, target, propertyKey);

//通过修饰器在构造函数上应用源数据

@Reflect.metadata(metadataKey, metadataValue)

class C {

// 通过修饰器在方法或属性上应用源数据

@Reflect.metadata(metadataKey, metadataValue)

method() {

}

}

我们已经在 tsconfig.json 中开启了 emitDecoratorMetadata 选项，此时，TypeScript 在编译时定义一些 元数据设计键，目前可用的有：

• 属性类型元数据 design:type ：用于获取类属性的类型

• 参数类型元数据 design:paramtypes：用于获取方法参数的类型

• 返回类型元数据 design:returntype：用于获取返回值的类型

目前只有这三个设计键可用，但已经足够覆盖大部分常见场景了。

说了那么多概念，那么这个reflect-matedata 有什么用呢？有哪些使用场景？

使用场景

---

reflect-matedata 光看api很容易明白，使用也简单，主要是思想和使用场景比较抽象，在什么时候可以使用到他呢？下面总结了几个。

参数统一处理

主要是想统一替换实例，拦截然后重新插入。

示例主要演示了，不论接收什么参数，都可以重新拦截修改注入。

• 方法装饰器

• 根据 reflect-matedata design:paramtypes 拿到方法参数类型

• 根据类型实例化修改然后重新注入

代码：

无论我传男生还是女生，我都统一拦截处理修改成了中性。

import “reflect-metadata”;

class People {

sex:string

}

class Women implements People{

sex: string = ‘女生’

}

class Man implements People{

sex: string = ‘男生’

}

function SexDecorate(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor){

let PropsTypes = Reflect.getMetadata(‘design:paramtypes’,target,propertyKey)

let p = new PropsTypes0

p.sex = ‘中性’

let orgMethod = descriptor.value

descriptor.value = ()=>{

orgMethod§

}

}

class Student {

@SexDecorate

getSex(obj:People){

console.log(obj);

}

}

let man = new Man()

let women = new Women()

let std = new Student()

std.getSex(man)

std.getSex(women)

打印结果：

控制反转和依赖注入

---

在Angular 和nestjs 中有大量的注入，这也是我从新学习装饰器的目的，就是看懂nestjs 代码。

说这个之前，先做个试验：

class Tes {

constructor(a:string) {

}

run(name:string){

}

}

console.log(Reflect.getMetadata(‘design:paramtypes’, Tes));

我要通过 Reflect.getMetadata 去构造函数参数，这样是取不出来的，必须加上装饰器。

我加一个装饰器就可以取出来了：

const a:()=>ClassDecorator = ()=>{

return (target:Function)=>{

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-pteMYCKN-1712703030865)]