深入理解 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小tip资料
Nov 23 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
jquery中radio checked问题
Mar 16 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 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实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
javascript 树控件 比较好用
2009/06/11 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中Collection的使用小技巧
2014/08/18 Python
Python函数中定义参数的四种方式
2014/11/30 Python
python保存字符串到文件的方法
2015/07/01 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
详解Python中第三方库Faker
2020/09/25 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
UNIX特点都有哪些
2016/04/05 面试题
建筑个人求职信范文
2014/01/25 职场文书
就业意向书范文
2014/04/01 职场文书
新闻编辑求职信
2014/07/13 职场文书
小浪底导游词
2015/02/12 职场文书
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js