【前端】你好，我叫TypeScript （五）装饰器

1.什么是装饰器

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

创新互联公司是一家专业从事网站建设、网站设计的网络公司。作为专业网站建设公司,创新互联公司依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、网络营销推广及网站设计开发服务！

  • 装饰器是一个表达式
  • 表达式被执行后，返回一个函数
  • 函数的输入参数为：target，name和descriptor
  • 执行函数后，可能返回descriptor对象，用于配置target对象

装饰器使用@expression形式，expression求值后必须返回一个函数，他会在运行时被调用，被装饰的声明信息作为参数传入。

例如：

 
 
 
      
  
  
  1. // 定义装饰器 
    2.   
  
  
  2. function testDecorator(target: any, key: string): void { 
    3.   
  
  
  3.   console.log("Target: ", target ); 
    4.   
  
  
  4.   console.log("key: ", key); 
    5.   
  
  
  5. } 
    6.   
  
  
  6.  
    7.   
  
  
  7. // 使用装饰器 
    8.   
  
  
  8. class Boat{ 
    9.   
  
  
  9.   color: string = "yellow"; 
    10.   
  
  
  10.  
    11.   
  
  
  11.   get formattedColor(): string{ 
    12.   
  
  
  12.     return  `this boat color is ${this.color}`; 
    13.   
  
  
  13.      
    14.   
  
  
  14.   } 
    15.   
  
  
  15.    
    16.   
  
  
  16.   @testDecorator 
    17.   
  
  
  17.   pilot(): void{ 
    18.   
  
  
  18.     console.log("swish"); 
    19.   
  
  
  19.      
    20.   
  
  
  20.   } 
    21.   
  
  
  21. } 
    22.   
  
  
  22.  
    23.   
  
  
  23. // 实例化 
    24.   
  
  
  24. const boat = new Boat(); 
    25.   
  
  
  25. boat.pilot(); 
    26.   
  
  
  26. console.log(boat.formattedColor); 
    27.

运行得到：

 
 
 
      
  
  
  1. Target:  {} 
    2.   
  
  
  2. key:  pilot 
    3.   
  
  
  3. swish 
    4.   
  
  
  4. this boat color is yellow 
    5.

2.装饰器分类

装饰器根据其所装饰的类型分为以下一种：

  • 类装饰器
  • 属性装饰器
  • 方法装饰器
  • 参数装饰器

若要启用实验性的装饰器特性，你必须在命令行或tsconfig.json里启用experimentalDecorators编译器选项：

命令行:

 
 
 
      
  
  
  1. tsc --target ES5 --experimentalDecorators 
    2.

tsconfig.json:

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

2.1 类装饰器

类装饰器用于类构造函数，进行监听、修改或替换类定义，在类声明之前进行声明(紧挨着类声明)。

切记：

  • 类装饰器不能用在声明文件中(.d.ts)，也不能用在任何外部上下文中。
  • 类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。
  • 如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明。
  • 如果你要返回一个新的构造函数，你必须注意处理好原来的原型链。在运行时的装饰器调用逻辑中不会为你做这些。

类装饰器声明：

 
 
 
      
  
  
  1. declare  type ClassDecorator = ( 
    2.   
  
  
  2.   target: TFunction 
    3.   
  
  
  3. )=>TFunction | void; 
    4.

类装饰器顾名思义，就是⽤来装饰类的。它接收⼀个参数：

  • target: TFunction - 被装饰的类

栗子：

 
 
 
      
  
  
  1. // 类装饰器 
    2.   
  
  
  2. function classDecorator(constructor: typeof Boat){ 
    3.   
  
  
  3.   console.log(constructor); 
    4.   
  
  
  4.    
    5.   
  
  
  5. } 
    6.   
  
  
  6.  
    7.   
  
  
  7. // 使用类装饰器 
    8.   
  
  
  8. @classDecorator 
    9.   
  
  
  9. class Boat{ 
    10.   
  
  
  10.  
    11.   
  
  
  11. } 
    12.

运行结果：

 
 
 
      
  
  
  1. [class Boat] 
    2.

2.2 方法装饰器

方法装饰器用于方法的属性描述符，可以进行监听、修改或替换方法定义，在待修饰方法声明前进行声明。方法装饰器不能用在声明文件(.d.ts)，重载或者任何外部上下文中。

方法装饰器表达式会在运行时当作函数被调用，传入下列3个参数：

  • target：被装饰的类
  • key: 方法名
  • descriptor: 属性描述符

「注意：如果代码输出目标版本小于ES5，属性描述符将会是undefined。」

如果方法装饰器返回一个值，它会被用作方法的属性描述符。

举个栗子：

 
 
 
      
  
  
  1. // 定义装饰器 
    2.   
  
  
  2. function testDecorator(target: any, key: string): void { 
    3.   
  
  
  3.   console.log("Target: ", target ); 
    4.   
  
  
  4.   console.log("key: ", key); 
    5.   
  
  
  5. } 
    6.   
  
  
  6.  
    7.   
  
  
  7. function logError(errorMessage: string){ 
    8.   
  
  
  8.   return function(target: any, key: string, desc: PropertyDescriptor){ 
    9.   
  
  
  9.     const method = desc.value; 
    10.   
  
  
  10.     desc.value = function(){ 
    11.   
  
  
  11.       try { 
    12.   
  
  
  12.         method(); 
    13.   
  
  
  13.       }catch(err){ 
    14.   
  
  
  14.         console.log(errorMessage); 
    15.   
  
  
  15.          
    16.   
  
  
  16.       } 
    17.   
  
  
  17.     } 
    18.   
  
  
  18.   } 
    19.   
  
  
  19. } 
    20.   
  
  
  20.  
    21.   
  
  
  21. // 使用装饰器 
    22.   
  
  
  22. class Boat{ 
    23.   
  
  
  23.   color: string = "yellow"; 
    24.   
  
  
  24.  
    25.   
  
  
  25.   @testDecorator 
    26.   
  
  
  26.   get formattedColor(): string{ 
    27.   
  
  
  27.     return  `this boat color is ${this.color}`; 
    28.   
  
  
  28.      
    29.   
  
  
  29.   } 
    30.   
  
  
  30.  
    31.   
  
  
  31.   @logError("Oops boat was sunk in ocean") 
    32.   
  
  
  32.   pilot(): void{ 
    33.   
  
  
  33.     throw new Error() 
    34.   
  
  
  34.     console.log("swish"); 
    35.   
  
  
  35.      
    36.   
  
  
  36.   } 
    37.   
  
  
  37. } 
    38.   
  
  
  38.  
    39.   
  
  
  39. // 实例化 
    40.   
  
  
  40. const boat = new Boat(); 
    41.   
  
  
  41. boat.pilot(); 
    42.

运行得到：

 
 
 
      
  
  
  1. Target:  {} 
    2.   
  
  
  2. key:  formattedColor 
    3.   
  
  
  3. Oops boat was sunk in ocean 
    4.

2.3 属性装饰器

属性装饰器属性描述符只能用来监视类中是否声明了某个名字的属性，在属性声明前进行声明。

属性装饰器表达式会在运行时当做函数进行调用，传入两个参数：

  • target: 被装饰的类
  • key: 被装饰类的属性名字

注意：属性描述符不作为参数传入属性装饰器。因为目前还没有办法在定义一个原型对象时描述一个实例属性，并且没有办法进行建议监听或修改一个属性的初始化方法。

 
 
 
      
  
  
  1. // 定义装饰器 
    2.   
  
  
  2. function testDecorator(target: any, key: string): void { 
    3.   
  
  
  3.   console.log("Target: ", target ); 
    4.   
  
  
  4.   console.log("key: ", key); 
    5.   
  
  
  5. } 
    6.   
  
  
  6.  
    7.   
  
  
  7. function logError(errorMessage: string){ 
    8.   
  
  
  8.   return function(target: any, key: string, desc: PropertyDescriptor){ 
    9.   
  
  
  9.     const method = desc.value; 
    10.   
  
  
  10.     desc.value = function(){ 
    11.   
  
  
  11.       try { 
    12.   
  
  
  12.         method(); 
    13.   
  
  
  13.       }catch(err){ 
    14.   
  
  
  14.         console.log(errorMessage); 
    15.   
  
  
  15.          
    16.   
  
  
  16.       } 
    17.   
  
  
  17.     } 
    18.   
  
  
  18.   } 
    19.   
  
  
  19. } 
    20.   
  
  
  20.  
    21.   
  
  
  21. // 使用装饰器 
    22.   
  
  
  22. class Boat{ 
    23.   
  
  
  23.   @testDecorator 
    24.   
  
  
  24.   color: string = "yellow"; 
    25.   
  
  
  25.  
    26.   
  
  
  26.   // @testDecorator 
    27.   
  
  
  27.   get formattedColor(): string{ 
    28.   
  
  
  28.     return  `this boat color is ${this.color}`; 
    29.   
  
  
  29.      
    30.   
  
  
  30.   } 
    31.   
  
  
  31.  
    32.   
  
  
  32.   @logError("Oops boat was sunk in ocean") 
    33.   
  
  
  33.   pilot(): void{ 
    34.   
  
  
  34.     throw new Error() 
    35.   
  
  
  35.     console.log("swish"); 
    36.   
  
  
  36.      
    37.   
  
  
  37.   } 
    38.   
  
  
  38. } 
    39.

运行结果：

 
 
 
      
  
  
  1. Target:  {} 
    2.   
  
  
  2. key:  color 
    3.

2.4 参数装饰器

参数装饰器用于类构造函数或方法声明。接收三个参数：

  • target: 被装饰的类
  • key：方法名
  • index：方法中的参数索引值
 
 
 
      
  
  
  1. // 定义装饰器 
    2.   
  
  
  2. function testDecorator(target: any, key: string): void { 
    3.   
  
  
  3.   console.log("Target: ", target ); 
    4.   
  
  
  4.   console.log("key: ", key); 
    5.   
  
  
  5. } 
    6.   
  
  
  6.  
    7.   
  
  
  7. function logError(errorMessage: string){ 
    8.   
  
  
  8.   return function(target: any, key: string, desc: PropertyDescriptor){ 
    9.   
  
  
  9.     const method = desc.value; 
    10.   
  
  
  10.     desc.value = function(){ 
    11.   
  
  
  11.       try { 
    12.   
  
  
  12.         method(); 
    13.   
  
  
  13.       }catch(err){ 
    14.   
  
  
  14.         console.log(errorMessage); 
    15.   
  
  
  15.          
    16.   
  
  
  16.       } 
    17.   
  
  
  17.     } 
    18.   
  
  
  18.   } 
    19.   
  
  
  19. } 
    20.   
  
  
  20.  
    21.   
  
  
  21. // 参数装饰器 
    22.   
  
  
  22. function parameterDecorator(target: any, key: string, index: number){ 
    23.   
  
  
  23.   console.log(key, index); 
    24.   
  
  
  24.    
    25.   
  
  
  25. } 
    26.   
  
  
  26.  
    27.   
  
  
  27. // 使用装饰器 
    28.   
  
  
  28. class Boat{ 
    29.   
  
  
  29.   @testDecorator 
    30.   
  
  
  30.   color: string = "yellow"; 
    31.   
  
  
  31.  
    32.   
  
  
  32.   // @testDecorator 
    33.   
  
  
  33.   get formattedColor(): string{ 
    34.   
  
  
  34.     return  `this boat color is ${this.color}`; 
    35.   
  
  
  35.      
    36.   
  
  
  36.   } 
    37.   
  
  
  37.  
    38.   
  
  
  38.   @logError("Oops boat was sunk in ocean") 
    39.   
  
  
  39.   pilot(): void{ 
    40.   
  
  
  40.     throw new Error() 
    41.   
  
  
  41.     console.log("swish"); 
    42.   
  
  
  42.      
    43.   
  
  
  43.   } 
    44.   
  
  
  44.  
    45.   
  
  
  45.  
    46.   
  
  
  46.   fast( 
    47.   
  
  
  47.     @parameterDecorator speed: string, 
    48.   
  
  
  48.     @parameterDecorator generateWake: boolean 
    49.   
  
  
  49.   ): void{ 
    50.   
  
  
  50.     if(speed === "fast"){ 
    51.   
  
  
  51.       console.log("swish"); 
    52.   
  
  
  52.     }else{ 
    53.   
  
  
  53.       console.log("nothing"); 
    54.   
  
  
  54.        
    55.   
  
  
  55.     } 
    56.   
  
  
  56.   } 
    57.   
  
  
  57. } 
    58.

运行结果：

 
 
 
      
  
  
  1. Target:  {} 
    2.   
  
  
  2. key:  color 
    3.   
  
  
  3. fast 1 
    4.   
  
  
  4. fast 0 
    5.

小结

我们看到装饰器很方便为我们结果了许多问题。装饰器根据其装饰的对象不同，分为：类装饰器、属性装饰器、方法装饰器、参数装饰器。

网站题目：【前端】你好，我叫TypeScript （五）装饰器
链接地址：http://www.36103.cn/qtweb/news11/23111.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

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

猜你还喜欢下面的内容

动态网站知识

同城分类信息

重庆网站设计　　 　成都app软件开发　　 　成都纯水机　　 　名片　　 　成都网站推广　　 　四川國際商會　　 　成都定制网站　　 　三台网站建设　　 　川银永信　　 　广安迈傲建站　　 　成都网站建设　　 　青羊总部基地　　 　响应式网站建设　　 　短视频拍摄　　 　微信小程序开发　　 　旅游网站建设方案　　 　格蓝特设备　　 　手机网站建设套餐　　 　成都橡塑保温板　　 　成都展柜设计公司