文档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装饰器的更多相关文章

  1. 装饰器模式&&ES7 Decorator 装饰器

    装饰器模式(Decorator Pattern)允许向一个现有的对象动态添加新的功能,同时又不改变其结构.相比JavaScript中通过鸡肋的继承来给对象增加功能来说,装饰器模式相比生成子类更为灵活. ...

  2. koa2使用es7 的装饰器decorator

    本文主要讲述我在做项目中使用装饰器(decorator)来动态加载koa-router的路由的一个基础架构. 目前JavaScript 对decorator 是不支持,但是可以用babel 来编译 既 ...

  3. JS 装饰器,一篇就够

    更多文章,请在Github blog查看 在 ES6 中增加了对类对象的相关定义和操作(比如 class 和 extends ),这就使得我们在多个不同类之间共享或者扩展一些方法或者行为的时候,变得并 ...

  4. 简单理解 ES7 Decorator(装饰器)

    如何使用ES7 Decorator给你的游戏人物开挂? // 预告: 本文有点小难度,对js不太熟的人可能比较懵逼 // 本文的目的是让你们知其然 // ======================= ...

  5. 在express中使用ES7装饰器构建路由

    在Java的Spring框架中,我们经常会看到类似于@Controller这样的注解,这类代码能够极大的提高我们代码的可读性和复用性.而在Javascript的ES7提案中,有一种新的语法叫做deco ...

  6. 从C#到TypeScript - 装饰器

    总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...

  7. Javascript 装饰器极速指南

    pablo.png Decorators 是ES7中添加的JavaScript新特性.熟悉Typescript的同学应该更早的接触到这个特性,TypeScript早些时候已经支持Decorators的 ...

  8. 【Angular专题】 (3)装饰器decorator,一块语法糖

    目录 一. Decorator装饰器 二. Typescript中的装饰器 2.1 类装饰器 2.2 方法装饰器 2.3 访问器装饰器 2.4 属性装饰器 2.5 参数装饰器 三. 用ES5代码模拟装 ...

  9. MobX基础 ----- 类的静态属性和装饰器

    当我们使用MobX的时候,首先要声明一个store, 用来保存状态,它的最基本的语法 如下: class Todo { @observable title = ""; @obser ...

随机推荐

  1. iOS开发-观察者模式

    观察者模式也被称作发布/订阅模式,观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己.观察者模式中 ...

  2. 如何将 Java 项目转换成 Maven 项目

    本文内容 Java 项目 Maven 项目 Java 项目转换成 Maven 项目 本文主要介绍如何将 Java 项目转换成 Maven 项目.首先要明确的是,用 Maven 管理 Java 项目的确 ...

  3. textAngular字体依赖

    textAngular部分按钮显示不正常, 对比后发现是少了字体css <link href="https://cdn.bootcss.com/font-awesome/4.7.0/c ...

  4. Duplicate复制数据库并创建物理StandBy(spfile+不同实例名+不同路径)

    过程和Duplicate复制数据库并创建物理StandBy类似,只是不需要重启数据库. 目的:创建standby,不重启源数据库 1设定环境如下: Primary数据库 IP 172.17.22.16 ...

  5. 视觉SLAM中的数学基础 第三篇 李群与李代数

    视觉SLAM中的数学基础 第三篇 李群与李代数 前言 在SLAM中,除了表达3D旋转与位移之外,我们还要对它们进行估计,因为SLAM整个过程就是在不断地估计机器人的位姿与地图.为了做这件事,需要对变换 ...

  6. Mac Apache Tomcat WebServer 服务器配置

    1.配置准备工作 1)配置服务器准备工作 在 Finder 中创建一个 "workspace" 的文件夹,可直接创建在 /Users/QianChia(当前用户名)目录下. 下载相 ...

  7. 同一个脚本在SQLPLUS和SQLDEV上的不同

    前几天收集了信息给Oracle.oracle那边表示格式不正确.让我又一次收集.我非常费解,我是依照官方文档做的呀,怎么会? 于是我果断自己搭了一个环境:RHEL5.8+10.2.0.5 客户那边没法 ...

  8. 相关系数(CORRELATION COEFFICIENTS)会骗人?

    CORRELATION COEFFICIENTS We've discussed how to summarize a single variable. The next question is ho ...

  9. Atitit  验证 数字验证 非空验证的最佳算法  h5

    Atitit  验证 数字验证 非空验证的最佳算法  h5 <td><select class="searchBox-select"   style=" ...

  10. Vivado开发工具熟悉之工具使用杂记

    这两天基本完成了实验室工程从ISE向vivado的移植,包括了两片FPGA的两个工程,这两个工程还算是比较大的工程,包括了内存,接口,embedded system,算法模块等,在这过程中也很好的熟悉 ...