深入理解 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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
angular6的table组件开发的实现示例
Dec 26 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
详解 TypeScript 枚举类型
Nov 02 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
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
区三好学生主要事迹
2014/01/30 职场文书
八年级语文教学反思
2014/02/11 职场文书
高中运动会广播稿
2015/08/19 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
基于angular实现树形二级表格
2021/10/16 Javascript
Python+DeOldify实现老照片上色功能
2022/06/21 Python