TypeScript Decorators

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

要启用对装饰器的实验性支持，您必须在命令行或 tsconfig.json 中启用 ExperimentDecorators 编译器选项：

tsc --target ES5 --experimentalDecorators

tsconfig.json:

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

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

例如，给定装饰器@sealed，我们可以编写如下的sealed 函数：

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

Decorator Factories

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

我们可以用以下方式编写一个装饰工厂：

function color(value: string) {// this is the decorator factory, it sets up// the returned decorator functionreturn function (target) {// this is the decorator// do something with 'target' and 'value'...};
}

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

因此，在 TypeScript 中对单个声明评估多个装饰器时，将执行以下步骤：

每个装饰器的表达式都是从上到下计算的。
然后将结果作为函数从下到上调用。

一个例子：

function first() {console.log("first(): factory evaluated");return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {console.log("first(): called");};
}function second() {console.log("second(): factory evaluated");return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {console.log("second(): called");};
}class ExampleClass {@first()@second()method() {}
}

更多Jerry的原创文章，尽在：“汪子熙”:

TypeScript Decorators 的使用说明相关推荐

浅入浅出Typescript Decorators
临时起的兴趣,想写一篇关于ts decorator的文章,就花小半天整理了一下... 这东西,在ES2017里好像也有... 文档的话看这里. 因为临时,也没想写太多文字介绍,带少许文字说明直接开撸代 ...
【超详细教程】如何使用TypeScript和GraphQL开发应用
GraphQL是一个专为构建灵活的API而生的强大的查询语言.它允许您为数据定义类型系统,因此在执行查询时,它仅返回所需的数据. 与TypeScript一起使用时,GraphQL可以为开发人员提供更好 ...
webpack 入口文件 php,webpack,jsx_webpack jsx 找不到入口文件，webpack,jsx - phpStudy
webpack jsx 找不到入口文件文件目录: ├── README.md ├── components │ ├── plists.jsx │ └── search.jsx ├── ind ...
angular2创建应用_如何使用Angular和SQLite3创建Electron应用程序。
angular2创建应用 by William Boxx 威廉·博克斯(William Boxx) 如何使用Angular和SQLite3创建Electron应用程序. (How to create ...
这么全的 Cocos Creator 3.x 学习资源，竟然是免费的！
目前 Cocos Creator 3.0 越来越成熟,使用 Cocos Creator 做游戏的小伙伴越来越多.我们在这里整理了现阶段最全面.最优质的 Cocos Creator 3.x 的学习资料, ...
如何使用装饰器创建一个简单的UI库
目录概念设置项目创建装饰器基类完成笑脸元素下一步是什么? 下载最新源(GitHub) 下载Tiny概念概念下面的代码揭示了我脑海中的概念.它表示一个简单的Web组件,可根据输入显示不同 ...
棱镜计划_棱镜vs类型
棱镜计划 Working with databases is an unavoidable part of being a backend developer. 作为后端开发人员,使用数据库是不可避免 ...
TS-装饰器篇 | 01
TS-装饰器篇 | 01 基本介绍装饰器是一种特殊类型的声明,它能够被附加到类.方法.属性或者参数上, 语法:装饰器使用 @expression 这种形式, expression求值后必须为一个函数 ...
Decorators TypeScript 装饰器
Decorators 装饰器(Decorator)用来增强 JavaScript 类(class)的功能,许多面向对象的语言都有这种语法,目前有一个提案将其引入了 ECMAScript. 装饰器是一种 ...

TypeScript Decorators 的使用说明

Decorator Factories

TypeScript Decorators 的使用说明相关推荐

最新文章

热门文章