深入理解 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
Nov 26 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
Ajax基础知识详解
Feb 17 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
ES6中的类(Class)示例详解
Dec 09 Javascript
JavaScript实现优先级队列
Dec 06 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 伪造本地文件包含漏洞的代码
2011/11/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
php两种无限分类方法实例
2015/04/21 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
Python中函数参数调用方式分析
2018/08/09 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
python 检查文件mime类型的方法
2018/12/08 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
keras多显卡训练方式
2020/06/10 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
使用Python实现音频双通道分离
2020/12/25 Python
详解rem 适配布局
2018/10/31 HTML / CSS
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
德国PC硬件网站:CASEKING
2016/10/20 全球购物
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
中科软测试工程师面试题
2012/06/16 面试题
领导干部考察材料
2014/02/08 职场文书
《学会合作》教学反思
2014/04/12 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
python多线程方法详解
2022/01/18 Python
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js