深入理解 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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
基于mysql的论坛(5)
2006/10/09 PHP
分享3个php获取日历的函数
2015/09/25 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
基于jquery的模态div层弹出效果
2010/08/21 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
Python不规范的日期字符串处理类
2014/06/10 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
Python pandas常用函数详解
2018/02/07 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
python pip如何手动安装二进制包
2020/09/30 Python
Python编写万花尺图案实例
2021/01/03 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
财务助理岗位职责
2013/11/10 职场文书
学校十一活动方案
2014/02/01 职场文书
先进人物事迹材料
2014/12/29 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python