深入理解 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 相关文章推荐
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 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实现多张图片上传加水印技巧
2013/04/18 PHP
smarty简单应用实例
2015/11/03 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
Firefox中autocomplete="off" 设置不起作用Bug的解决方法
2011/03/25 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
用原生js做单页应用
2017/01/17 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
应届毕业生求职信范例分享
2013/12/17 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
打架检讨书
2015/01/27 职场文书
《叶问2》观后感
2015/06/15 职场文书
法人代表资格证明书
2015/06/18 职场文书
法定代表人身份证明书
2015/06/18 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python