深入理解 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 相关文章推荐
文字幻灯片
Jun 26 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
JavaScript声明变量和数据类型的转换
Apr 12 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
windows平台中配置nginx+php环境
2015/12/06 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
手机端转换rem适应
2017/04/01 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
原生js实现自定义滚动条
2021/01/20 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
九步学会Python装饰器
2015/05/09 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
python简单读取大文件的方法
2016/07/01 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
python实现Decorator模式实例代码
2018/02/09 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
有创意的广告词
2014/03/18 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
网站出售协议书范文
2014/10/10 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
详解MySQL中的主键与事务
2021/05/27 MySQL