文档章节

TypeScript基础入门之装饰器(一)

durban
 durban
发布于 2018/10/21 22:49
字数 758
阅读 14
收藏 0

转发 TypeScript基础入门之装饰器(一)

介绍

随着TypeScript和ES6中Classes的引入,现在存在某些场景需要额外的功能来支持注释或修改类和类成员。
装饰器提供了一种为类声明和成员添加注释和元编程语法的方法。
装饰器是JavaScript的第2阶段提案,可作为TypeScript的实验性功能使用。

注意: 装饰器是一种实验性功能,可能在将来的版本中发生变化。

要为装饰器启用实验支持,必须在命令行或tsconfig.json中启用experimentalDecorators编译器选项:

命令行:

tsc --target ES5 --experimentalDecorators

tsconfig.json:

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true
    }
}

装饰器

装饰器是一种特殊的声明,可以附加到类声明,方法,访问器,属性或参数。
装饰器使用@expression形式,其中expression必须求值为一个函数,该函数将在运行时调用有关装饰声明的信息。

例如,给定装饰器@sealed,我们可以编写```sealed```函数,如下所示:

function sealed(target) {
    // do something with 'target' ...
}

注意: 您可以在下面的类装饰器中看到更详细的装饰器示例。

装饰器工厂

如果我们想自定义装饰器如何应用于声明,我们可以编写一个装饰器工厂。
装饰器工厂只是一个函数,它返回装饰器在运行时调用的表达式。

我们可以用以下方式编写装饰工厂:

function color(value: string) { // this is the decorator factory
    return function (target) { // this is the decorator
        // do something with 'target' and 'value'...
    }
}

注意: 您可以在下面的方法装饰器中看到装饰器工厂的更详细示例。

装饰器组成

可以将多个装饰器应用于声明,如以下示例所示:

1. 单行:

@f @g x

2. 多行:

@f
@g
x

当多个装饰器应用于单个声明时,它们的评估类似于数学中的函数组合。
在该模型中,当组成函数f和g时,得到的复合(f ∘ g)(x)等于f(g(x))。

因此,在TypeScript中评估单个声明上的多个装饰器时,将执行以下步骤:

1. 每个装饰器的表达式都是从上到下进行评估的。
2. 然后将结果从底部到顶部称为函数。

如果我们要使用装饰器工厂,我们可以通过以下示例观察此评估顺序:

function f() {
    console.log("f(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("f(): called");
    }
}

function g() {
    console.log("g(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("g(): called");
    }
}

class C {
    @f()
    @g()
    method() {}
}

运行后输出到控制台如下:

f(): evaluated
g(): evaluated
g(): called
f(): called

未完待续...

© 著作权归作者所有

共有 人打赏支持
durban
粉丝 99
博文 568
码字总数 184197
作品 0
崇明
后端工程师
私信 提问
TypeScript基础入门之装饰器(三)

转载 TypeScript基础入门之装饰器(三) 继续上篇文章[TypeScript基础入门之装饰器(二)] 访问器装饰器 Accessor Decorator在访问器声明之前声明。 访问器装饰器应用于访问器的属性描述符,可用...

durban
2018/10/23
0
0
Midway v1.0 正式发布 - 面向未来的全栈开发方案

双旦已过,新年将至,midwayJs 向大家献上贺礼。 之前我们向社区开放了我们的治理工具,也就是 Pandora.js 工具包,用于整个 Node.js 应用的监控和治理,我们承诺这不是结束,只是开源的开始...

陈仲寅
01/11
0
0
midway v1.0 社区正式发布 - 面向未来的全栈开发方案

midway v1.0 社区正式发布 - 面向未来的全栈开发方案 双旦已过,新年将至,midwayJs 向大家献上贺礼。 之前我们向社区开放了我们的治理工具,也就是 Pandora.js 工具包,用于整个 Node.js 应...

作者: 张挺
01/10
0
0
midway v1.0 社区正式发布 - 阿里面向未来的全栈开发方案

双旦已过,新年将至,midwayJs 向大家献上贺礼。 之前我们向社区开放了我们的治理工具,也就是 Pandora.js 工具包,用于整个 Node.js 应用的监控和治理,我们承诺这不是结束,只是开源的开始...

czy88840616
01/10
0
0
midway v1.0 社区正式发布 - 面向未来的全栈开发方案 会有未来吗?

双旦已过,新年将至,midwayJs 向大家献上贺礼,首先奉上地址: https://github.com/midwayjs/midway/,欢迎 star :sparkles::sparkles::sparkles:。 之前我们向社区开放了我们的治理工具,也...

左华栋
01/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7 下安装 Nginx

1、添加Nginx存储库 要添加CentOS 7 EPEL仓库,请打开终端并使用以下命令 yum install epel-release 2、安装Nginx 现在Nginx存储库已经安装在您的服务器上,使用以下yum命令安装Nginx yum i...

Oo若离oO
21分钟前
0
0
漏洞防御与修复工作

漏洞管理工作是企业安全建设必不可少的一环,在风险管理工作中,漏洞管理能够防患于未然,企业对漏洞管理有着广泛的基础建设和实践经验。但随着攻防技术的发展,传统漏洞管理的安全技术和管理...

linuxprobe16
今天
1
0
MicroPython技术及应用前景

1 Micropython技术是什么? MicroPython极精简高效的实现了Python3语言。它包含Python标准库的一小部分,能在单片机和受限环境中运行。 1.1 MicroPython发展 由剑桥大学的理论物理学家乔治....

bodasisiter
今天
7
0
跟我学Spring Cloud(Finchley版)-13-通用方式使用Hystrix

本节详细讲解使用Hystrix的通用方式。 简介 Hystrix是由Netflix开源的一个延迟和容错库,用于隔离访问远程系统、服务或者第三方库,防止级联失败,从而提升系统的可用性与容错性。Hystrix主要...

周立_ITMuch
今天
2
0
🛠️Hanjst/汉吉斯特更新加JavaScript运行时优化等

这是 Hanjst/汉吉斯特 发布以来的首个主要升级更新版本。这次的主要升级更新的内容包括移除HTML Comments注释行, 优化在 Hanjst include模板文件时的JavaScript运行时环境。 Hanjst 在设计和...

wadelau
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部