typeScript 装饰器

装饰器是一种特殊类型的声明,它能够被附加到类声明方法, 访问符属性参数上。 装饰器使用@expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。

例如,有一个@sealed装饰器,我们会这样定义sealed函数:

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

装饰器工厂

如果我们要定制一个修饰器如何应用到一个声明上,我们得写一个装饰器工厂函数。 装饰器工厂就是一个简单的函数,它返回一个表达式,以供装饰器在运行时调用。

我们可以通过下面的方式来写一个装饰器工厂函数:

function color(value: string) { // 这是一个装饰器工厂
    return function (target) { //  这是装饰器
        // do something with "target" and "value"...
    }
}

装饰器组合

多个装饰器可以同时应用到一个声明上,就像下面的示例:

  • 书写在同一行上:
@f @g x
  • 书写在多行上:
@f
@g
x

当多个装饰器应用于一个声明上,它们求值方式与复合函数相似。在这个模型下,当复合fg时,复合的结果(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

永远别忘了在装饰器后面加括号()

				
时间: 2024-11-09 03:07:23

typeScript 装饰器的相关文章

从C#到TypeScript - 装饰器

从C#到TypeScript - 装饰器 在C#里面如果想要不直接修改类或方法,但给类或方法添加一些额外的信息或功能,可以想到用Attribute,这是一个十分方便的功能装饰器.用TypeScript同样也可以利用装饰器来给类.函数.属性以及参数添加附加功能,装饰器是ES7的一个提案,在TypeScript里已经有实现可用,不过需要在tsconfig.json里启用experimentalDecorators. "compilerOptions": {     ..., // othe

TypeScript 装饰器的执行原理

装饰器本质上提供了对被装饰对象 Property? Descriptor 的操作,在运行时被调用. 因为对于同一对象来说,可同时运用多个装饰器,然后装饰器中又可对被装饰对象进行任意的修改甚至是替换掉实现,直观感觉会有一些主观认知上的错觉,需要通过代码来验证一下. 比如,假若每个装饰器都对被装饰对象的有替换,其结果会怎样? 多个装饰器的应用 通过编译运行以下示例代码并查看其结果可以得到一些直观感受: function f() { console.log("f(): evaluated")

TypeScript学习笔记(九):装饰器(Decorators)

装饰器简介 装饰器(Decorators)为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式. 需要注意的是:装饰器是一项实验性特性,在未来的版本中可能会发生改变. 若要启用实验性的装饰器特性,你必须在命令行或tsconfig.json里启用experimentalDecorators编译器选项: 1 { 2 "compilerOptions": { 3 "target": "ES5", 4 "experimentalDeco

Typescript中的装饰器原理

Typescript中的装饰器原理 1.小原理 因为react中的高阶组件本质上是个高阶函数的调用, 所以高阶组件的使用,我们既可以使用函数式方法调用,也可以使用装饰器. 也就是说,装饰器的本质就是一个高阶函数, 就是利用TypeScript的弱类型特性和装饰器特性,实现了一个加强版. 2.以一个例子来讲 //定义一个装饰器函数decTest function decTest(constructor: Function) { console.log(constructor("hello!&quo

TypeScript 素描 - 装饰器

/* 装饰器 简单理解为C#中的Attribute 可以装饰到类.函数.讯问符.属性.参数上 语法 @xxx 装饰器其实是一个函数 @xxx 就要有一个 function xxx 多个装饰器可以用来装饰一个声明, @f @g arg 或者在多行上 @f @g x 这样的组合最后的结果将会是 f(g(x)) 装饰器的执行顺序 1.参数装饰器,然后依次是方法装饰器,访问器装饰器,或属性装饰器应用到每个实例成员. 2.参数装饰器,然后依次是方法装饰器,访问器装饰器,或属性装饰器应用到每个静态成员. 3

Javascript装饰器的妙用

最近新开了一个Node项目,采用TypeScript来开发,在数据库及路由管理方面用了不少的装饰器,发觉这的确是一个好东西.装饰器是一个还处于草案中的特性,目前木有直接支持该语法的环境,但是可以通过 babel 之类的进行转换为旧语法来实现效果,所以在TypeScript中,可以放心的使用@Decorator. 什么是装饰器 装饰器是对类.函数.属性之类的一种装饰,可以针对其添加一些额外的行为.通俗的理解可以认为就是在原有代码外层包装了一层处理逻辑.个人认为装饰器是一种解决方案,而并非是狭义的@

转发: Angular装饰器

Angular中的装饰器是一个函数,它将元数据添加到类.类成员(属性.方法)和函数参数. 用法:要想应用装饰器,把它放在被装饰对象的上面或左边. Angular使用自己的一套装饰器来实现应用程序各部件之间的相互操作. 这个地方是前面几个模块(Modules), 指令(Diretives).组件(Components).依赖注入(Dependency Injection)等从装饰器这个侧面的整理. 你需要做的: 1.搞清楚理解TypeScript的装饰器原理. 2.搞清楚这里面每一个装饰器的作用,

详解create-react-app 2.0版本如何启用装饰器语法

create-react-app(简称cra)已经更新之2.0.3版本, babel也更新至7.x版本, JavaScript装饰器语法虽然还不是标准, 但是借助于babel, 也能在项目里愉快的玩耍. cra2.0时代如何启用装饰器语法呢? 我们依旧采用的是react-app-rewired, 通过劫持webpack cofig对象, 达到修改的目的. ? 1 yarn add react-app-rewired 修改package.json ? 1 2 3 4 5 "scripts"

Day4 - 迭代器&生成器、装饰器、Json & pickle 数据序列化、软件目录结构规范

---恢复内容开始--- 本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 作业:ATM项目开发 1.列表生成式,迭代器&生成器 列表生成式 需求:列表a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],要求把列表里的每个值加1 1 a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 2 b = [] 3 for i in a: 4 b.append(i+1) 5 a = b 6 print(a) 普通青