深入理解 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 相关文章推荐
项目实践之javascript技巧
Dec 06 Javascript
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
JavaScript简介
Feb 15 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
js实现时分秒倒计时
Dec 03 Javascript
JS面试题中深拷贝的实现讲解
May 07 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中批量替换文件名的实现代码
2011/07/20 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
python简单实现计算过期时间的方法
2015/06/09 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python元字符的用法实例解析
2018/01/17 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
用 Python 制作地球仪的方法
2020/04/24 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
客服实习的个人自我鉴定
2013/10/20 职场文书
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
生产部经理岗位职责
2013/12/16 职场文书
市场营销管理制度
2014/01/29 职场文书
旷课检讨书1000字
2014/02/14 职场文书
品质标语大全
2014/06/21 职场文书
团日活动总结报告
2014/06/25 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
装配出错检讨书
2014/09/23 职场文书
户籍证明模板
2014/09/28 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
2015年护士工作总结范文
2015/03/31 职场文书