深入理解 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 相关文章推荐
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
在Vue 中获取下拉框的文本及选项值操作
Aug 13 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数组编码转换示例详解
2014/03/11 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
js 获取时间间隔实现代码
2014/05/12 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
Python字符串中查找子串小技巧
2015/04/10 Python
PyQt5每天必学之布局管理
2018/04/19 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
Python谱减法语音降噪实例
2019/12/18 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
python 画图 图例自由定义方式
2020/04/17 Python
python 一维二维插值实例
2020/04/22 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
2014年会演讲稿范文
2014/01/06 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
研修心得体会
2014/09/04 职场文书
《给予树》教学反思
2016/03/03 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
python基础之类属性和实例属性
2021/10/24 Python
Linux安装apache服务器的配置过程
2021/11/27 Servers
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis