es7 class装饰器
文档http://es6.ruanyifeng.com/#docs/decorator
ts文档 https://www.tslang.cn/docs/handbook/decorators.html#class-decorators
当多个装饰器应用于一个声明上,从上至下调用,从下而上执行
function info(opt: {
username: string;
age: number;
email: string;
}) {
return function (klass: any) {
klass.username = opt.username;
klass.age = opt.age;
klass.email = opt.email;
}
}
@info({
username: 'ajanuw',
age: 14,
email: '123@sina.com'
})
class Ajanuw {
constructor() { }
}
const klass = (<any>Ajanuw);
console.log(klass.username, klass.age, klass.email);
es 的装饰器
let l = console.log
function klass(value) {
return target => {
// l(value) // api
// l(target) // 对象
}
}
function prop(value) {
return function (target, key, des) { // target 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象
// l(value) // username
// l(target, key, des) // 对象,属性名,属性描述符
}
}
function func(value) {
return function (target, key, des) { // target 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象
// l(value) // function
// l(key) // 函数名 show
// l(des.value) // show函数, 可以改写
// des.value = function(){
// l('hello')
// }
}
}
function Body(target) {
// l( target ) // undefined
}
@klass('api')
class Ajanuw {
@prop('username') name = 'ajanuw'
@func('function')
show(@Body body) {
l(body)
}
}
new Ajanuw().show()
重载构造函数
function classDecorator<T extends { new (...args: any[]): {} }>(
constructor: T
) {
return class extends constructor {
newProperty = "new property";
hello = "override";
};
}
@classDecorator
class Greeter {
constructor(public hello: string) {}
}
var g = new Greeter("world");
console.log(g.hello); // override
参数装饰器
import "reflect-metadata";
const requiredMetadataKey = Symbol("required");
const bodyMetadataKey = Symbol("body");
function required(
target: Object,
propertyKey: string | symbol,
parameterIndex: number
) {
let existingRequiredParameters: number[] =
Reflect.getOwnMetadata(requiredMetadataKey, target, propertyKey) || [];
existingRequiredParameters.push(parameterIndex);
Reflect.defineMetadata(
requiredMetadataKey,
existingRequiredParameters,
target,
propertyKey
);
}
function Body(key: string): any {
return function (target: any, propertyKey: string, parameterIndex: number) {
let existingRequiredParameters: any[] =
Reflect.getOwnMetadata(bodyMetadataKey, target, propertyKey) || [];
existingRequiredParameters.push({ parameterIndex, key });
// 注入元数据
Reflect.defineMetadata(
bodyMetadataKey,
existingRequiredParameters,
target,
propertyKey
);
};
}
function validate(
target: any,
propertyName: string,
descriptor: TypedPropertyDescriptor<any>
) {
let method = descriptor.value;
// 重写value
descriptor.value = function () {
let requiredParameters: number[] = Reflect.getOwnMetadata(
requiredMetadataKey,
target,
propertyName
);
if (requiredParameters) {
for (let parameterIndex of requiredParameters) {
if (
parameterIndex >= arguments.length ||
arguments[parameterIndex] === undefined
) {
throw new Error("Missing required argument.");
}
}
}
// 获取目标对象上提供的元数据键的元数据值
Reflect.getOwnMetadata(bodyMetadataKey, target, propertyName)?.forEach(
(it: any) => {
// 重写参数
arguments[it.parameterIndex] = arguments[it.parameterIndex][it.key];
}
);
return method?.apply(this, arguments);
};
}
class Greeter {
@validate
greet(@required @Body("name") name: any): any {
console.log("Hello " + name); // Hello xxxx
}
}
const g = new Greeter();
g.greet({ name: "xxxx" });
es7 class装饰器的更多相关文章
- 装饰器模式&&ES7 Decorator 装饰器
装饰器模式(Decorator Pattern)允许向一个现有的对象动态添加新的功能,同时又不改变其结构.相比JavaScript中通过鸡肋的继承来给对象增加功能来说,装饰器模式相比生成子类更为灵活. ...
- koa2使用es7 的装饰器decorator
本文主要讲述我在做项目中使用装饰器(decorator)来动态加载koa-router的路由的一个基础架构. 目前JavaScript 对decorator 是不支持,但是可以用babel 来编译 既 ...
- JS 装饰器,一篇就够
更多文章,请在Github blog查看 在 ES6 中增加了对类对象的相关定义和操作(比如 class 和 extends ),这就使得我们在多个不同类之间共享或者扩展一些方法或者行为的时候,变得并 ...
- 简单理解 ES7 Decorator(装饰器)
如何使用ES7 Decorator给你的游戏人物开挂? // 预告: 本文有点小难度,对js不太熟的人可能比较懵逼 // 本文的目的是让你们知其然 // ======================= ...
- 在express中使用ES7装饰器构建路由
在Java的Spring框架中,我们经常会看到类似于@Controller这样的注解,这类代码能够极大的提高我们代码的可读性和复用性.而在Javascript的ES7提案中,有一种新的语法叫做deco ...
- 从C#到TypeScript - 装饰器
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- Javascript 装饰器极速指南
pablo.png Decorators 是ES7中添加的JavaScript新特性.熟悉Typescript的同学应该更早的接触到这个特性,TypeScript早些时候已经支持Decorators的 ...
- 【Angular专题】 (3)装饰器decorator,一块语法糖
目录 一. Decorator装饰器 二. Typescript中的装饰器 2.1 类装饰器 2.2 方法装饰器 2.3 访问器装饰器 2.4 属性装饰器 2.5 参数装饰器 三. 用ES5代码模拟装 ...
- MobX基础 ----- 类的静态属性和装饰器
当我们使用MobX的时候,首先要声明一个store, 用来保存状态,它的最基本的语法 如下: class Todo { @observable title = ""; @obser ...
随机推荐
- 如何Python下载大文件?
我想用python脚本下载很多文件,但是经常就有那么几个出错,写了个error handling,跳了过去,但是把出错的链接保存了一下. 转过天来,研究了一下出的什么错. 一个报错如下: PS C:\ ...
- Spark2.3(三十四):Spark Structured Streaming之withWaterMark和windows窗口是否可以实现最近一小时统计
WaterMark除了可以限定来迟数据范围,是否可以实现最近一小时统计? WaterMark目的用来限定参数计算数据的范围:比如当前计算数据内max timestamp是12::00,waterMar ...
- Hadoop3集群搭建之——hbase安装及简单操作
折腾了这么久,hbase终于装好了 ------------------------- 上篇: Hadoop3集群搭建之——虚拟机安装 Hadoop3集群搭建之——安装hadoop,配置环境 Hado ...
- 手机 https 抓包---Charles篇
原文出处: Lu尼玛的想疗院 作为一名现代前端,除了要掌握html,css,js 以及一系列乱七八糟框架之外,还得懂得如何抓包改包.当然,常规的网站或者自主开发的我们往往使用 chrome或者 fir ...
- 微软BI 之SSIS 系列 - Lookup 中的字符串比较大小写处理 Case Sensitive or Insensitive
开篇介绍 前几天碰到这样的一个问题,在 Lookup 中如何设置大小写不敏感比较,即如何在 Lookup 中的字符串比较时不区分大小写? 实际上就这个问题已经有很多人提给微软了,但是得到的结果就是 C ...
- MDX Cookbook 02 - 除数为零的问题
先直接看一个例子 - WITH MEMBER [Date].[Calendar Year].[CY 2006 vs 2005 Bad] AS ], FORMAT_STRING = 'Percent' ...
- 单反毁三代,kindle富一生
盖kindle 面更香 人皆知有用之用,而莫知无用之用 一个存留记忆的地方:http://i-remember.fr/en 文章来源:刘俊涛的博客 欢迎关注,有问题一起学习欢迎留言.评论
- 【Linux】使用w命令和uptime命令查看系统负载
在Linux系统中查询系统CPU和内存的负载(使用率)时,我们通常习惯于使用top.atop或者ps,这篇文章将要给大家介绍如何使用w命令和uptime命令来查看系统的负载情况,对于uptime命令, ...
- Service discovery
https://www.cnblogs.com/dirt2/p/5987067.html Use Assigned Numbers in the Service Discovery Protocol ...
- SNF快速开发平台3.0之--系统里广播的作用--迅速及时、简明扼要的把信息发送给接收者
广播信息,即速度快捷.迅速及时.简明扼要的把信息发送给接收者. 当然在SNF快速开发平台上你也可以作为公告使用.不管当做什么使用要满足以下需求: 简单操作:页面操作简单 只需要输入内容就可以发送. 灵 ...