一、是什么

装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上

是一种在不改变原类和使用继承的情况下,动态地扩展对象功能

同样的,本质也不是什么高大上的结构,就是一个普通的函数,@expression 的形式其实是Object.defineProperty的语法糖

expression求值后必须也是一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入

二、使用方式

由于typescript是一个实验性特性,若要使用,需要在tsconfig.json文件启动,如下:

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

typescript装饰器的使用和javascript基本一致

类的装饰器可以装饰:

  • 方法/属性

  • 参数

  • 访问器

类装饰

例如声明一个函数 addAge 去给 Class 的属性 age 添加年龄.

function addAge(constructor: Function) {
constructor.prototype.age = 18;
} @addAge
class Person{
name: string;
age!: number;
constructor() {
this.name = 'huihui';
}
} let person = new Person(); console.log(person.age); // 18
 

上述代码,实际等同于以下形式:

Person = addAge(function Person() { ... });

上述可以看到,当装饰器作为修饰类的时候,会把构造器传递进去。constructor.prototype.age 就是在每一个实例化对象上面添加一个 age 属性

方法/属性装饰

同样,装饰器可以用于修饰类的方法,这时候装饰器函数接收的参数变成了:

  • target:对象的原型
  • propertyKey:方法的名称
  • descriptor:方法的属性描述符

可以看到,这三个属性实际就是Object.defineProperty的三个参数,如果是类的属性,则没有传递第三个参数

如下例子:

// 声明装饰器修饰方法/属性
function method(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log(target);
console.log("prop " + propertyKey);
console.log("desc " + JSON.stringify(descriptor) + "\n\n");
descriptor.writable = false;
}; function property(target: any, propertyKey: string) {
console.log("target", target)
console.log("propertyKey", propertyKey)
} class Person{
@property
name: string;
constructor() {
this.name = 'huihui';
} @method
say(){
return 'instance method';
} @method
static run(){
return 'static method';
}
} const xmz = new Person(); // 修改实例方法say
xmz.say = function() {
return 'edit'
}
 

输出如下图所示:

参数装饰

接收3个参数,分别是:

  • target :当前对象的原型
  • propertyKey :参数的名称
  • index:参数数组中的位置
function logParameter(target: Object, propertyName: string, index: number) {
console.log(target);
console.log(propertyName);
console.log(index);
} class Employee {
greet(@logParameter message: string): string {
return `hello ${message}`;
}
}
const emp = new Employee();
emp.greet('hello');
 

输入如下图:

访问器装饰

使用起来方式与方法装饰一致,如下:

 
function modification(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
console.log(target);
console.log("prop " + propertyKey);
console.log("desc " + JSON.stringify(descriptor) + "\n\n");
}; class Person{
_name: string;
constructor() {
this._name = 'huihui';
} @modification
get name() {
return this._name
}
}
 

装饰器工厂

如果想要传递参数,使装饰器变成类似工厂函数,只需要在装饰器函数内部再函数一个函数即可,如下:

function addAge(age: number) {
return function(constructor: Function) {
constructor.prototype.age = age
}
} @addAge(10)
class Person{
name: string;
age!: number;
constructor() {
this.name = 'huihui';
}
} let person = new Person();
 

执行顺序

当多个装饰器应用于一个声明上,将由上至下依次对装饰器表达式求值,求值的结果会被当作函数,由下至上依次调用,例如如下:

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
 

三、应用场景

可以看到,使用装饰器存在两个显著的优点:

  • 代码可读性变强了,装饰器命名相当于一个注释
  • 在不改变原有代码情况下,对原来功能进行扩展

后面的使用场景中,借助装饰器的特性,除了提高可读性之后,针对已经存在的类,可以通过装饰器的特性,在不改变原有代码情况下,对原来功能进行扩展

TypeScript 中装饰器的理解?应用场景?的更多相关文章

  1. TypeScript 素描 - 装饰器

    /* 装饰器 简单理解为C#中的Attribute 可以装饰到类.函数.讯问符.属性.参数上 语法 @xxx 装饰器其实是一个函数 @xxx 就要有一个 function xxx 多个装饰器可以用来装 ...

  2. 转发对python装饰器的理解

    [Python] 对 Python 装饰器的理解的一些心得分享出来给大家参考   原文  http://blog.csdn.net/sxw3718401/article/details/3951958 ...

  3. python中装饰器使用

    装饰器是对已有的模块进行装饰(添加新功能)的函数. 现有一段代码: import time def func1(): time.sleep(3) print("in the func1&qu ...

  4. Python - 关于带参数的装饰器的理解

    [原创]转载请注明作者Johnthegreat和本文链接 关于装饰器的理解,特别像<盗梦空间>中的进入梦境和从梦境出来的过程,一层一层的深入梦境,然后又一层一层的返回,被带入梦境的是被装饰 ...

  5. 第7.18节 案例详解:Python类中装饰器@staticmethod定义的静态方法

    第7.18节 案例详解:Python类中装饰器@staticmethod定义的静态方法 上节介绍了Python中类的静态方法,本节将结合案例详细说明相关内容. 一.    案例说明 本节定义了类Sta ...

  6. 8.Python中装饰器是什么?

    Python中装饰器是什么? A Python decorator is a specific change that we make in Python syntax to alter functi ...

  7. python中对变量的作用域LEGB、闭包、装饰器基本理解

    一.作用域 在Python程序中创建.改变.查找变量名时,都是在一个保存变量名的空间中进行,我们称之为命名空间,也被称之为作用域.python的作用域是静态的,在源代码中变量名被赋值的位置决定了该变量 ...

  8. python中闭包和装饰器的理解(关于python中闭包和装饰器解释最好的文章)

    转载:http://python.jobbole.com/81683/ 呵呵!作为一名教python的老师,我发现学生们基本上一开始很难搞定python的装饰器,也许因为装饰器确实很难懂.搞定装饰器需 ...

  9. python中装饰器你真的理解吗?

    def w1(func): print('装饰器1....') def w1_in(): print('w1_in.....') func() return w1_in def w2(func): p ...

  10. Python中装饰器的用法

    定义: 装饰器本身就是一个函数 为其他函数提供附加功能 不改变源代码 不改变原调用方式 装饰器=高阶函数+嵌套函数 知识点: 函数本身就是一个变量(意味着可以被复制给一个变量:test=test(1) ...

随机推荐

  1. supersr--KVO/KVC

    KVO内部实现原理 1.KVO是基于runtime机制实现的. 2.当某个类的对象第一次被观察是,系统就会在运行期动态地创建该类的一个派生类,在这个派生类中重写基类中任何被观察属性的set方法.派生类 ...

  2. PHP错误:Forbidden You don&#39;t have permission to access / on this server.

    今天在测试一个php程序的时候,发现这个问题: Forbidden You don't have permission to access / on this server. 开始的时候我是用http ...

  3. JAVA邮件收发实现(待)

    http://blog.csdn.net/ycg01/article/details/1394465

  4. UVA How Big Is It?

    题目例如以下: How Big Is It?  Ian's going to California, and he has to pack his things, including hiscolle ...

  5. 201521123092《java程序设计》第五周学习总结

    1.本周学习总结 #1.1 尝试使用思维导图总结有关多态与接口的知识点. 2.书面作业 #1.代码阅读:Child压缩包内源代码##1.1 com.parent包中Child.java文件能否编译通过 ...

  6. 通过FileReader和FileWriter实现复制文件的方法。

    public class CopyDemo { public static void main(String []args) { copyd(); } public static  void copy ...

  7. react create-react-app 怎么添加sass

    一.先上官方文档 https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/RE ...

  8. Kali WSL折腾笔记-在Windows10上使用Kali子系统

    前言 Windows10在发布WSL(Windows Subsystem for Linux)后经过多次更新,现在使用体验已经比较良好,下面简单记录一下我在安装Kali WSL中遇到的种种问题,为各位 ...

  9. 始于阿里,回归社区:阿里8个项目进入CNCF云原生全景图

    破土而出的生命力,源自理想主义者心底对技术的信念. 云原生技术正席卷全球,云原生基金会在去年KubeCon +CloudNativeCon NA的现场宣布: 其正在孵化的项目已达14个,入驻的厂家或产 ...

  10. 5月25号开学! 第13期《python3自动化测试selenium+接口》课程,python零基础也能学

    2019年 第13期<python3自动化测试selenium+接口>课程,5月25号开学! 主讲老师:上海-悠悠 上课方式:QQ群视频在线教学 本期上课时间:5月25号-7月28号,每周 ...