深入理解 TypeScript Reflect Metadata


Posted in Javascript onDecember 12, 2019

在定义类或者类方法的时候,可以设置一些元数据,我们可以获取到在类与类方法上添加的元数据,用的方法就是 Reflect Metadata。元数据指的是描述东西时用的数据。

在 TypeScript 里使用 Reflect Metadata 需要做下面这样的配置:

{
 "compilerOptions": {
  "experimentalDecorators": true ,
  "emitDecoratorMetadata": true
 },
}

然后在项目里安装 reflect-metadata 这个包:

npm install reflect-metadata --save

然后做个实验:

import 'reflect-metadata';

@Reflect.metadata('role', 'admin')
class Post {}

const metadata = Reflect.getMetadata('role', Post);

console.log(metadata); // admin

先导入 reflect-metadata 这个包,然后在定义的 Post 类的上面用 Reflect.metadata 装饰器添加了一条元数据,role 是这条元数据的名字,admin 是我们给这条数据设置的对应的值。

稍后如果想获取到在类上添加的这些元数据,可以使用 Reflect.getMetadata 方法,role 是元数据的名字,Post 是对应的类的名字。执行上面代码,会返回 admin 这个字符串。

自定义装饰器

在上面的例子里我们用了 Reflect.metadata 设置的元数据。我们也可以自定义一个装饰器去完成同样的事情。像下面这样:

import 'reflect-metadata';

function Role(name: string): ClassDecorator {
 return target => {
  Reflect.defineMetadata('role', name, target);
 };
}

@Role('admin')
class Post {}

const metadata = Reflect.getMetadata('role', Post);

console.log(metadata);

Role 是自定义的一个装饰器,接收一个 name 参数,这是一个装饰器工厂,返回的是 ClassDecorator。返回的东西应该是个适合在类上使用的装饰器,所以接收一个 target 参数,这个东西就是类的构造方法。在方法里用 Reflect.defineMetadata 方法设置了一个自定义的元数据叫 role,对应的值是 name,也就是使用这个装饰器的时候提供的参数值,第三个参数是 target,就是要添加元数据的那个类。

有了这个自定义的装饰器,使用它的时候可以像这样: @Role('admin'),功能就是在它装饰的类的上面添加了一条叫 role 的元数据,设置的对应的值是 admin。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
vue如何判断dom的class
Apr 26 Javascript
Vue Router中应用中间件的方法
Aug 06 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 #Javascript
vue-property-decorator用法详解
Dec 12 #Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 #Javascript
JavaScript Reflect Metadata实现详解
Dec 12 #Javascript
JS动态显示倒计时效果
Dec 12 #Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 #Javascript
js实现倒计时秒杀效果
Mar 25 #Javascript
You might like
PHP脚本数据库功能详解(下)
2006/10/09 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
php微信开发之图片回复功能
2018/06/14 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
python如何通过实例方法名字调用方法
2018/03/21 Python
将python图片转为二进制文本的实例
2019/01/24 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
工程管理专业个人求职信范文
2013/12/07 职场文书
公证委托书格式
2014/09/13 职场文书
银行委托书范本
2014/09/28 职场文书
迁户口计划生育证明
2014/10/19 职场文书
中学教师个人总结
2015/02/10 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android
Java 数组内置函数toArray详解
2021/06/28 Java/Android