• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript-装饰器

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
  • DecoratorES7 的一个新语法,目前仍处于 提案中
  • 装饰器是一种特殊类型的声明,它能够被附加到类,方法, 访问器,属性或参数上

被添加到不同地方的装饰器有不同的名称和特点:

  • 附加到类上, 类装饰器
  • 附加到方法上, 方法装饰器
  • 附加到访问器上, 访问器装饰器
  • 附加到属性上, 属性装饰器
  • 附加到参数上, 参数装饰器

装饰器基本格式

普通装饰器

function test(target) {
    console.log('test');
}

@test
class Person {

}

如上代码的含义为给 Person 这个类绑定了一个 普通的装饰器,这个装饰器的代码会在定义类之前执行, 并且在执行的时候会把这个类传递给装饰器,除了如上的步骤还是不行的编译器还是会报错,还需要开启 experimentalDecorators 修改 tsconfig.json:

"experimentalDecorators": true,

装饰器工厂

  • 如果一个函数返回一个回调函数, 如果这个函数作为装饰器来使用, 那么这个函数就是 装饰器工厂
function test(target) {
    console.log('test');
}

function demo() {
    console.log('demo out');
    return (target) => {
        console.log('demo in');
    }
}

@demo()
class Person {

}

如上代码的含义为给 Person 这个类绑定了一个 装饰器工厂,在绑定的时候由于在函数后面写上了 (), 所以会先执行装饰器工厂拿到真正的装饰器, 真正的装饰器会在定义类之前执行, 所以紧接着又执行了里面。

装饰器组合

  • 普通的装饰器可以和装饰器工厂结合起来一起使用

结合起来一起使用的时候, 会先 从上至下 的执行所有的装饰器工厂, 拿到所有真正的装饰器, 然后再 从下至上 的执行所有的装饰器:

function test(target) {
    console.log('test');
}

function demo() {
    console.log('demo out');
    return (target) => {
        console.log('demo in');
    }
}

function abc(target) {
    console.log('abc');
}

function def() {
    console.log('def out');
    return (target) => {
        console.log('def in');
    }
}

@test
@demo()
@def()
@abc
class Person {

}


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue3.0马上就要来了,TypeScript学会了没?发布时间:2022-07-18
下一篇:
06-TypeScript中的表达式发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap