深入理解 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 相关文章推荐
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
js 数据类型判断的方法
Dec 03 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 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实现多条件查询实例代码
2010/07/17 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
php 问卷调查结果统计
2015/10/08 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
laravel model 两表联查示例
2019/10/24 PHP
PHP7 新增常量
2021/03/09 PHP
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
Python程序设计入门(4)模块和包
2014/06/16 Python
Python实现登录接口的示例代码
2017/07/21 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
详解numpy的argmax的具体使用
2019/05/27 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
Python基于内置函数type创建新类型
2020/10/22 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
保密承诺书
2014/03/27 职场文书
教师岗位职责范本
2015/04/02 职场文书