深入理解 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 相关文章推荐
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
详解React路由传参方法汇总记录
Nov 29 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多用户计数器代码
2007/03/11 PHP
php判断变量类型常用方法
2012/04/24 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
php实现购物车功能(下)
2016/01/05 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
页面中js执行顺序
2009/11/09 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
python三元运算符实现方法
2013/12/17 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
python导入pandas具体步骤方法
2019/06/23 Python
django删除表重建的实现方法
2019/08/28 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
采购部部门职责
2013/12/15 职场文书
银行员工辞职信范文
2014/01/20 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
村长贪污检举信
2014/04/04 职场文书
调解协议书
2014/04/16 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
尼克胡哲观后感
2015/06/08 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python