2024年TypeScript系列教程十一《装饰器》 -- reflect-metadata(1)，六个面试官

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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

// 通过 key 在对象或属性的原型链上获取源数据的值

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

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

// 通过 自带源数据 key 在对象或属性的原型链上获取源数据的值

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

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

// 获取对象或属性原型链上的所有源数据

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)=>{

}

}

@a()

class Tes {

constructor(a:string) {

}

run(name:string){

}

}

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

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总

sdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

前端面试题汇总

JavaScript

前端资料汇总