TypeScript 装饰器：高级编程本领

---

  

---

前言

TypeScript 装饰器 | 阮一峰 TypeScript 教程

• 迩来，在进行学习 Nest 后台服务的时候发现，对于 TS 装饰器的用法还是有一些暗昧，于是写一篇文章来详细解说这个概念，目前设置到的知识点如下：
  
  
  
  • 类、原型与原型链、this 指向与绑定
    
  
  

前置知识

类与实例

TypeScript 的 class 类型 | 阮一峰 TypeScript 教程
原型与原型链

• 原型：每一个 JavaScript 对象（null 除外）在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性，其实就是 prototype 对象，主要作用是共享方法
  
• 原型链：由相互关联的原型构成的链状结构就是原型链
  

• 以一个经典的类继承举例
  
• 起首定义一个 Person 类，定义 Teacher 继承 Person 类，然后输出参数构造 Teacher 类的实例 t1
  
• 则原型链向上查找的过程为 t1 的隐式原型 __proto__ 指向类 Teacher 的显示原型 prototype，以此类推实行父类 Person 的 prototype，父类的 __proto__ 指向 Object 的 prototype。最终 Object 的 __proto__ 指向 null
  
• instanceof：能否在向上查找的原型链中，找到和目标匹配的显示原型
  
• hasOwnProperty() 方法返回一个布尔值，表现对象自有属性（而不是继承来的属性）中是否具有指定的属性。
  

this 指向与绑定

一文搞懂 this 指向-CSDN博客
雷同点：都会改变函数的this指向
绑定不同：

• bind不会改变原函数的this关键字，返回一个新的函数，不会立刻调用
  
• call、apply都可以立刻调用原函数
  

传参不同：

• bind、call传入一组参数
  
• apply传入数组参数
  

简介

• 装饰器（Decorator）：是一种语法结构，在定义时修改类的行为，表现 @ + 表达式
  
  
  • 表达式必须是一个函数，或者实行后得到一个函数
    
  • 吸收所装饰对象的一些相关值作为参数
    
  • 函数要么修改原有值，要么返回新对象代替修饰的目标对象
    
  
  
• TypeScript 早期支持旧的装饰器语法（后续解说），5.0 后使用尺度语法，传统语法需要打开--experimentalDecorators编译参数
  
• 不同类型的装饰器可以修改/代替原目标对象的内容
  
• 结构如下所示：
  

1. type Decorator = (
2.   value: DecoratedValue, // 所装饰的对象
3.   context: {   // 上下文对象
4.     kind: string; // 类型，class, method, getter, setter, field, accessor
5.     name: string | symbol; // 所装饰目标的名称
6.     addInitializer?(initializer: () => void): void; // 完善类的初始化逻辑
7.     static?: boolean;   // 所装饰的对象是否为类的私有成员
8.     private?: boolean;  // 所装饰的对象是否为类的静态成员
9.     access: {           // 一个对象，包含了某个值的 get 和 set 方法
10.       get?(): unknown;
11.       set?(value: unknown): void;
12.     };
13.   }
14. ) => void | ReplacementValue;

复制代码

类装饰器

结构

1. type ClassDecorator = (
2.   value: Function, // 当前类本身
3.   context: {
4.     kind: "class";
5.     name: string | undefined;
6.     addInitializer(initializer: () => void): void;
7.   }
8. ) => Function | void;

复制代码

案例

1. function Greeter(value: any, context: any) {
2.   // 代替当前的类
3.   return class extends value {
4.     age: number = 18
6.     greet() {
7.       console.log('Hello, ' + this.name, this.age)
8.     }
9.   }
11.   // 代替当前的构造方法
12.   const newConstructor = function (...args: any[]) {
13.     const instance = new value(...args)
14.     instance.age = 18
16.     // 添加新的方法
17.     instance.greet = function () {
18.       console.log('Hello, ' + this.name, this.age)
19.     }
21.     return instance
22.   }
24.   // 复制原型链
25.   newConstructor.prototype = value.prototype
27.   return newConstructor
28. }
30. // @ts-ignore
31. @Greeter
32. class Person {
33.   public name: string
35.   constructor(name: string) {
36.     this.name = name
37.   }
39.   greet() {}
40. }
42. const person = new Person('John')
43. person.greet() // Hello, John

复制代码

方法装饰器

结构

1. // 方法装饰器会改写类的原始方法，实际上就是传递方法的代码结构，在基础上进行修改
3. type ClassMethodDecorator = (
4.   value: Function, // 方法体
5.   context: {  
6.     kind: "method";
7.     name: string | symbol;
8.     static: boolean;   // 是否为静态方法
9.     private: boolean;  // 是否为只读属性
10.     access: { get: () => unknown };   // 方法的存取器
11.     addInitializer(initializer: () => void): void;   
12.   }
13. ) => Function | void;

复制代码

案例

1. function delay(ms: number) {
2.   return function (target: any, context: any) {
3.     return function (...args: any[]) {
4.       console.log('延时执行', ms)
6.       setTimeout(() => {
7.         target.apply(target, args)
8.         console.log('延时结束')
9.       }, ms)
10.     }
11.   }
12. }
14. class Person {
15.   public name: string
17.   constructor(name: string) {
18.     this.name = name
19.   }
21.   @delay(1000)
22.   greet() {
23.     console.log(this.name)
24.   }
25. }

复制代码

属性装饰器

结构

1. type ClassFieldDecorator = (
2.   value: undefined,   // 不能通过 value 获取装饰器的值
3.   context: {
4.     kind: "field";
5.     name: string | symbol;
6.     static: boolean;
7.     private: boolean;
8.     access: { get: () => unknown; set: (value: unknown) => void };
9.     addInitializer(initializer: () => void): void;
10.   }
11. ) => (initialValue: unknown) => unknown | void;

复制代码

案例

1. function fieldDecorator(target: any, context: any) {
2.   const { kind, name } = context
3.   if (kind === 'field') {
4.     return function (value: string) {
5.       console.log(`Decorating ${name} with value ${value}`)
7.       return value
8.     }
9.   }
10. }
12. function twice(target: any, context: any) {
13.   return (value: number) => value * 2
14. }
16. class Person {
17.   @fieldDecorator
18.   public name: string = 'John Doe'
20.   @twice
21.   public age: number = 30
22. }
24. const person = new Person()
25. console.log(person.name)
26. console.log(person.age)

复制代码

getter、setter 装饰器

结构

1. type ClassGetterDecorator = (
2.   value: Function,
3.   context: {
4.     kind: "getter";
5.     name: string | symbol;
6.     static: boolean;
7.     private: boolean;
8.     access: { get: () => unknown };
9.     addInitializer(initializer: () => void): void;
10.   }
11. ) => Function | void;
13. type ClassSetterDecorator = (
14.   value: Function,
15.   context: {
16.     kind: "setter";
17.     name: string | symbol;
18.     static: boolean;
19.     private: boolean;
20.     access: { set: (value: unknown) => void };
21.     addInitializer(initializer: () => void): void;
22.   }
23. ) => Function | void;

复制代码

案例

1. function lazy(target: any, { kind, name }: any) {
2.   if (kind === 'getter') {
3.     // 返回函数，这个函数会在实例上定义一个与装饰器目标同名的属性
4.     return function (this: any) {
5.       const result = target.call(this)
6.       Object.defineProperty(this, name, {
7.         value: result,
8.         writable: false,
9.       })
10.       return result
11.     }
12.   }
13. }
15. class C {
16.   @lazy
17.   get value() {
18.     console.log('正在计算……')
19.     return '开销大的计算结果'
20.   }
21. }
23. const inst = new C()
24. console.log(inst.value) // 正在计算…… 开销大的计算结果
25. console.log(inst.value) // 开销大的计算结果

复制代码

accessor 装饰器

结构

1. type ClassAutoAccessorDecorator = (
2.   value: {   // 将变量变为私有属性，并自动添加 get/set 方法，静态属性和私有属性都可用
3.     get: () => unknown;
4.     set: (value: unknown) => void;
5.   },
6.   context: {
7.     kind: "accessor";
8.     name: string | symbol;
9.     access: { get(): unknown; set(value: unknown): void };
10.     static: boolean;
11.     private: boolean;
12.     addInitializer(initializer: () => void): void;
13.   }
14. ) => {
15.   get?: () => unknown;
16.   set?: (value: unknown) => void;
17.   init?: (initialValue: unknown) => unknown; // 可以取代初始变量的值
18. } | void;

复制代码

案例

1. function logAccess(value: any, context: any) {
2.   const { get, set } = value
4.   return {
5.     get() {
6.       const result = get.call(this)
7.       console.log(`Getting ${String(context.name)}: ${result}`)
8.       return result
9.     },
10.     set(newValue: number) {
11.       console.log(`Setting ${String(context.name)} to ${newValue}`)
12.       set.call(this, newValue)
13.     },
14.     init(initValue: number) {
15.       console.log(`Initializing ${String(context.name)} with ${initValue}`)
16.       return initValue + 1 // 返回初始化值
17.     },
18.   }
19. }
21. class Student {
22.   @logAccess
23.   accessor age: number = 0
24. }
26. const student = new Student()
27. console.log(student.age) // Getting age: 1
28. student.age = 20 // Setting age to 20;

复制代码

装饰器实行顺序

1. function d(str: string) {
2.   console.log(`评估 @d(): ${str}`)
3.   return (value: any, context: any) => console.log(`应用 @d(): ${str}`)
4. }
6. function log(str: string) {
7.   console.log(str + ' 被调用')
8.   return str
9. }
11. @d('类装饰器')
12. class T {
13.   @d('静态属性装饰器')
14.   static staticField = log('静态属性值')
16.   @d('实例属性装饰器')
17.   instanceField = log('实例属性值')
19.   @d('静态方法装饰器')
20.   static staticMethod() {
21.     return log('静态方法')
22.   }
24.   @d('实例方法装饰器 2')
25.   @d('实例方法装饰器 1')
26.   [log('instanceMethod')]() {
27.     return log('实例方法')
28.   }
30.   @d('getter 装饰器')
31.   get getter() {
32.     return log('getter')
33.   }
35.   @d('setter 装饰器')
36.   set setter(value: any) {
37.     log('setter')
38.   }
39. }
41. const t = new T()
42. console.log(t.instanceField)
43. // 阶段一：评估
44. 评估 @d(): 类装饰器
45. 评估 @d(): 静态属性装饰器
46. 评估 @d(): 实例属性装饰器
47. 评估 @d(): 静态方法装饰器
48. 评估 @d(): 实例方法装饰器 2
49. 评估 @d(): 实例方法装饰器 1
51. instanceMethod 被调用
53. 评估 @d(): getter 装饰器
54. 评估 @d(): setter 装饰器
56. // 阶段二：应用
57. 应用 @d(): 静态方法装饰器
58. 应用 @d(): 实例方法装饰器 1
59. 应用 @d(): 实例方法装饰器 2
60. 应用 @d(): getter 装饰器
61. 应用 @d(): setter 装饰器
62. 应用 @d(): 静态属性装饰器
63. 应用 @d(): 实例属性装饰器
64. 应用 @d(): 类装饰器
65. 静态属性值 被调用
67. // 阶段三：实例执行
68. 实例属性值 被调用
69. 实例属性值

复制代码

• 评估阶段（evaluation）：计算 @ 符号反面表达式的值，确保是函数
  
  
  • 评估阶段的实行，从上到小实行
    
  • 碰到目标是函数的返回的属性，需要实行返回结果才行
    
  
  
• 应用阶段（application）：评估之后得到的函数，应用到所装饰目标
  
  
  • 多个装饰器的，从下到上依次实行
    
  • 静态方法 => 实例方法 => getter => setter => 静态属性 => 实例属性 => 类装饰器
    
  • 静态属性值由函数返回的，此时实行
    
  • 实例属性值由函数返回的，实例调用才实行
    
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。