深入理解 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 相关文章推荐
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 Javascript
详解JavaScript中Arguments对象用途
Aug 30 Javascript
vue 数字翻牌器动态加载数据
Apr 20 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编写大型网站问题集
2007/03/06 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
python写的一个文本编辑器
2014/01/23 Python
python fabric实现远程部署
2017/01/05 Python
详解用python写一个抽奖程序
2019/05/10 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
民族团结先进个人材料
2014/02/05 职场文书
两只小狮子教学反思
2014/02/05 职场文书
寄语学生的话
2014/04/10 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
求职自我评价范文100字
2014/09/23 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
追悼会答谢词范文
2015/09/29 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript