深入理解 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的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
详解JavaScript函数
Dec 01 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
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编程中八种常见的文件操作方式
2006/11/19 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
linux iconv方法的使用
2011/10/01 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
不用一句js代码初始化组件
2016/01/27 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python import自定义模块方法
2015/02/12 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python 串口读写的实现方法
2019/06/12 Python
python小程序实现刷票功能详解
2019/07/17 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
支教自我鉴定
2014/01/18 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
后备干部培训方案
2014/05/22 职场文书
爱护公共设施的标语
2014/06/24 职场文书
篮球社团活动总结
2014/06/27 职场文书
新郎新娘答谢词
2015/01/04 职场文书
司机个人年终总结
2015/03/03 职场文书