文档章节

es7 class装饰器

o
 osc_ns45oss7
发布于 2018/04/24 22:20
字数 242
阅读 11
收藏 0

精选30+云产品,助力企业轻松上云!>>>

文档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()
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
TypeScript + Vue系列(二): 引入Vuex

前言 在TypeScript + Vue系列(一): 新项目配置中, 我们已经初始化了一个TypeScript + Vue的模板. 但是对于一个大型的Vue项目来说, Vuex的使用是必不可少的. 所以这一节我们将来展示一下如何在...

Lee_tanghui
2018/01/15
0
0
Decorator:从原理到实践

前言 原文链接:Nealyang/personalBlog ES6 已经不必在过多介绍,在 ES6 之前,装饰器可能并没有那么重要,因为你只需要加一层 wrapper 就好了,但是现在,由于语法糖 class 的出现,当我们想...

osc_b7lz7dji
2019/09/25
2
0
typescript-装饰器(七)

装饰器 装饰器是一种特殊的类型声明,它能够被附加到类声明、方法、属性、参数上,可以修改类的行为; 通俗来讲装饰器就是一个方法,可以 被注入到类、方法、属性、参数上来扩展类、方法、属...

droden
2019/10/26
17
0
Javascript 装饰器极速指南

pablo.png Decorators 是ES7中添加的JavaScript新特性。熟悉Typescript的同学应该更早的接触到这个特性,TypeScript早些时候已经支持Decorators的使用,而且提供了ES5的支持。本文会对Decor...

osc_f1goeecw
2018/04/07
1
0
Decorator:从原理到实践,我一点都不虚~

前言 原文链接:Nealyang/personalBlog ES6 已经不必在过多介绍,在 ES6 之前,装饰器可能并没有那么重要,因为你只需要加一层 wrapper 就好了,但是现在,由于语法糖 class 的出现,当我们想...

Neal_yang
2019/04/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Git本地分支和远程分支关联

转载:https://blog.csdn.net/cherishhere/article/details/52606884 转载:https://blog.zengrong.net/post/1746.html 转载:https://blog.csdn.net/xinghuowuzhao/article/details/78663526 转......

osc_ur9jjorb
6分钟前
0
0
移动应用测试方法与思路

标签(空格分隔): 浅谈移动应用测试方法与思路 在 GUI 自动化测试这个系列,我讲了很多基于浏览器的业务测试的内容,你可能会说,现在移动 App 大行其道,对移动应用测试的方法和思路才更重...

osc_avdbd8s3
8分钟前
3
0
搜索所有Git历史记录中的字符串? [重复] - Search all of Git history for a string? [duplicate]

问题: This question already has an answer here: 这个问题在这里已有答案: How to grep Git commit diffs or contents for a certain word? 如何grep Git为某个单词提交差异或内容? 8 ...

fyin1314
9分钟前
12
0
css实现圆形倒计时效果

实现思想: 1.最外层包裹内部的div1(.box) 2.内部左右两边div2(.left_box和.right_box),宽度为div1的一半,通过overflow:hidden隐藏其内部的div 3.在左右两个div2中各有一个div3(.left_item...

osc_sg74u54s
10分钟前
0
0
python语言中threading.Thread类的使用方法

1. 编程语言里面的任务和线程是很重要的一个功能。在python里面,线程的创建有两种方式,其一使用Thread类创建 # 导入Python标准库中的Thread模块 from threading import Thread # 创建一...

osc_q5urtsdm
10分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部