深入理解 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 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
JavaScript效率调优经验
Jun 04 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
vue滚动插件better-scroll使用详解
Oct 18 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注入实例
2006/10/09 PHP
收藏的一个php小偷的核心程序
2007/04/09 PHP
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
详解vue组件之间的通信
2020/08/30 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
详解python里的命名规范
2018/07/16 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
python 实现多维数组转向量
2019/11/30 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
python标准库OS模块详解
2020/03/10 Python
Django 再谈一谈json序列化
2020/03/16 Python
python如何停止递归
2020/09/09 Python
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
初三学习决心书
2014/03/11 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
公安机关起诉意见书
2015/05/20 职场文书
毕业证明书
2015/06/19 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
create-react-app开发常用配置教程
2022/06/25 Javascript