面试官：说说你对TypeScript中装饰器的理解？应用场景？

一、是什么

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

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、成都网站制作、乡宁网络推广、小程序设计、乡宁网络营销、乡宁企业策划、乡宁品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供乡宁建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

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

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

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

二、使用方式

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

 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.     "compilerOptions": { 
    3. 
  
  
  
  
  3.         "target": "ES5", 
    4. 
  
  
  
  
  4.         "experimentalDecorators": true 
    5. 
  
  
  
  
  5.     } 
    6. 
  
  
  
  
  6. } 
    7.

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

类的装饰器可以装饰：

  • 类
  • 方法/属性
  • 参数
  • 访问器
  • 类装饰

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

 
 
 
 
    
  
  
  
  
  1. function addAge(constructor: Function) { 
    2. 
  
  
  
  
  2.   constructor.prototype.age = 18; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. @addAge 
    6. 
  
  
  
  
  6. class Person{ 
    7. 
  
  
  
  
  7.   name: string; 
    8. 
  
  
  
  
  8.   age!: number; 
    9. 
  
  
  
  
  9.   constructor() { 
    10. 
  
  
  
  
  10.     this.name = 'huihui'; 
    11. 
  
  
  
  
  11.   } 
    12. 
  
  
  
  
  12. } 
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14. let person = new Person(); 
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16. console.log(person.age); // 18 
    17.

上述代码，实际等同于以下形式：

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

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

方法/属性装饰

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

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

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

如下例子：

 
 
 
 
    
  
  
  
  
  1. // 声明装饰器修饰方法/属性 
    2. 
  
  
  
  
  2. function method(target: any, propertyKey: string, descriptor: PropertyDescriptor) { 
    3. 
  
  
  
  
  3.   console.log(target); 
    4. 
  
  
  
  
  4.   console.log("prop " + propertyKey); 
    5. 
  
  
  
  
  5.   console.log("desc " + JSON.stringify(descriptor) + "\n\n"); 
    6. 
  
  
  
  
  6.   descriptor.writable = false; 
    7. 
  
  
  
  
  7. }; 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. function property(target: any, propertyKey: string) { 
    10. 
  
  
  
  
  10.   console.log("target", target) 
    11. 
  
  
  
  
  11.   console.log("propertyKey", propertyKey) 
    12. 
  
  
  
  
  12. } 
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14. class Person{ 
    15. 
  
  
  
  
  15.  @property 
    16. 
  
  
  
  
  16.  name: string; 
    17. 
  
  
  
  
  17.  constructor() { 
    18. 
  
  
  
  
  18.    this.name = 'huihui'; 
    19. 
  
  
  
  
  19.  } 
    20. 
  
  
  
  
  20.  
    21. 
  
  
  
  
  21.  @method 
    22. 
  
  
  
  
  22.  say(){ 
    23. 
  
  
  
  
  23.    return 'instance method'; 
    24. 
  
  
  
  
  24.  } 
    25. 
  
  
  
  
  25.  
    26. 
  
  
  
  
  26.  @method 
    27. 
  
  
  
  
  27.  static run(){ 
    28. 
  
  
  
  
  28.    return 'static method'; 
    29. 
  
  
  
  
  29.  } 
    30. 
  
  
  
  
  30. } 
    31. 
  
  
  
  
  31.  
    32. 
  
  
  
  
  32. const xmz = new Person(); 
    33. 
  
  
  
  
  33.  
    34. 
  
  
  
  
  34. // 修改实例方法say 
    35. 
  
  
  
  
  35. xmz.say = function() { 
    36. 
  
  
  
  
  36.  return 'edit' 
    37. 
  
  
  
  
  37. } 
    38.

输出如下图所示：

参数装饰

接收3个参数，分别是：

  • target ：当前对象的原型
  • propertyKey ：参数的名称
  • index：参数数组中的位置
 
 
 
 
    
  
  
  
  
  1. function logParameter(target: Object, propertyName: string, index: number) { 
    2. 
  
  
  
  
  2.   console.log(target); 
    3. 
  
  
  
  
  3.   console.log(propertyName); 
    4. 
  
  
  
  
  4.   console.log(index); 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. class Employee { 
    8. 
  
  
  
  
  8.   greet(@logParameter message: string): string { 
    9. 
  
  
  
  
  9.       return `hello ${message}`; 
    10. 
  
  
  
  
  10.   } 
    11. 
  
  
  
  
  11. } 
    12. 
  
  
  
  
  12. const emp = new Employee(); 
    13. 
  
  
  
  
  13. emp.greet('hello'); 
    14.

输入如下图：

访问器装饰

使用起来方式与方法装饰一致，如下：

 
 
 
 
    
  
  
  
  
  1. function modification(target: Object, propertyKey: string, descriptor: PropertyDescriptor) { 
    2. 
  
  
  
  
  2.   console.log(target); 
    3. 
  
  
  
  
  3.   console.log("prop " + propertyKey); 
    4. 
  
  
  
  
  4.   console.log("desc " + JSON.stringify(descriptor) + "\n\n"); 
    5. 
  
  
  
  
  5. }; 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. class Person{ 
    8. 
  
  
  
  
  8.  _name: string; 
    9. 
  
  
  
  
  9.  constructor() { 
    10. 
  
  
  
  
  10.    this._name = 'huihui'; 
    11. 
  
  
  
  
  11.  } 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.  @modification 
    14. 
  
  
  
  
  14.  get name() { 
    15. 
  
  
  
  
  15.    return this._name 
    16. 
  
  
  
  
  16.  } 
    17. 
  
  
  
  
  17. } 
    18.

装饰器工厂

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

 
 
 
 
    
  
  
  
  
  1. function addAge(age: number) { 
    2. 
  
  
  
  
  2.   return function(constructor: Function) { 
    3. 
  
  
  
  
  3.     constructor.prototype.age = age 
    4. 
  
  
  
  
  4.   } 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. @addAge(10) 
    8. 
  
  
  
  
  8. class Person{ 
    9. 
  
  
  
  
  9.   name: string; 
    10. 
  
  
  
  
  10.   age!: number; 
    11. 
  
  
  
  
  11.   constructor() { 
    12. 
  
  
  
  
  12.     this.name = 'huihui'; 
    13. 
  
  
  
  
  13.   } 
    14. 
  
  
  
  
  14. } 
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16. let person = new Person(); 
    17.

执行顺序

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

 
 
 
 
    
  
  
  
  
  1. function f() { 
    2. 
  
  
  
  
  2.     console.log("f(): evaluated"); 
    3. 
  
  
  
  
  3.     return function (target, propertyKey: string, descriptor: PropertyDescriptor) { 
    4. 
  
  
  
  
  4.         console.log("f(): called"); 
    5. 
  
  
  
  
  5.     } 
    6. 
  
  
  
  
  6. } 
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8. function g() { 
    9. 
  
  
  
  
  9.     console.log("g(): evaluated"); 
    10. 
  
  
  
  
  10.     return function (target, propertyKey: string, descriptor: PropertyDescriptor) { 
    11. 
  
  
  
  
  11.         console.log("g(): called"); 
    12. 
  
  
  
  
  12.     } 
    13. 
  
  
  
  
  13. } 
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15. class C { 
    16. 
  
  
  
  
  16.     @f() 
    17. 
  
  
  
  
  17.     @g() 
    18. 
  
  
  
  
  18.     method() {} 
    19. 
  
  
  
  
  19. } 
    20. 
  
  
  
  
  20.  
    21. 
  
  
  
  
  21. // 输出 
    22. 
  
  
  
  
  22. f(): evaluated 
    23. 
  
  
  
  
  23. g(): evaluated 
    24. 
  
  
  
  
  24. g(): called 
    25. 
  
  
  
  
  25. f(): called 
    26.

三、应用场景

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

代码可读性变强了，装饰器命名相当于一个注释

在不改变原有代码情况下，对原来功能进行扩展

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

参考文献

https://www.tslang.cn/docs/handbook/decorators.html

https://juejin.cn/post/6844903876605280269#heading-5

网站名称：面试官：说说你对TypeScript中装饰器的理解？应用场景？
文章URL：http://www.mswzjz.cn/qtweb/news14/121464.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

网页设计公司知识

分类信息网

成都服务器托管　　 　开元建校　　 　做网站　　 　成都网站制作　　 　一元广告　　 　成都网站建设　　 　信衡房屋鉴定　　 　企业官网建设　　 　成都移动托管　　 　成都网站推广　　 　网站建设公司　　 　温江做网站　　 　新都网站建设　　 　广元双南建站　　 　成都定制网站　　 　免备案空间腾讯云　　 　网络营销公司　　 　品牌官网设计　　 　重庆手机网站建设　　 　四川晃众门窗