深入理解 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+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
jQuery 入门讲解1
Apr 15 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
js word表格动态添加代码
Jun 07 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
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/02/24 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
JS日历 推荐
2006/12/03 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
django 实现简单的插入视频
2020/04/07 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
继承公证书样本
2014/04/04 职场文书
家长给老师的感谢信
2015/01/20 职场文书
材料员岗位职责
2015/02/10 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python