TypeScript学习之路 - 装饰器（Decorators）

跳房子的前端

于 2024-09-14 09:30:28 发布

阅读量428

点赞数 3

分类专栏： TypeScript 学习之路文章标签： typescript 学习 vue

本文链接：https://blog.csdn.net/shenfangda520/article/details/142249257

版权

TypeScript 学习之路专栏收录该内容

8 篇文章 1 订阅

订阅专栏

TypeScript 的装饰器（Decorators）是一个实验性的特性，用于修改或增强类及其成员（如属性、方法等）的行为。装饰器是一种特殊类型的声明，能够在类定义时附加元数据，修改类的行为或添加功能。虽然它是一个实验性的特性，但在实际开发中非常有用，特别是当你需要在 TypeScript 中进行更复杂的类操作时。

基本概念

装饰器是一种函数，它可以附加到类、类的方法、类的属性、类的访问器（getter/setter）等。装饰器的作用是为被装饰的目标提供附加功能或修改其行为。

在 TypeScript 中使用装饰器之前，需要在 tsconfig.json 文件中启用 experimentalDecorators 选项：

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

装饰器的类型

类装饰器 (Class Decorator)
- 类装饰器是应用于类构造函数的函数。
- 通过它，你可以修改类的构造函数，或者添加一些额外的功能。
示例：
```
function Injectable(constructor: Function) {
  console.log(`Injectable decorator applied to ${constructor.name}`);
}

@Injectable
class MyService {
  constructor() {
    console.log('MyService created');
  }
}
```
在这个例子中，@Injectable 是一个类装饰器，它会在 MyService 类定义时被调用。

方法装饰器 (Method Decorator)

方法装饰器应用于类的实例方法。它接收三个参数：目标对象、方法名称和方法描述符。

示例：

function Log(target: any, propertyKey: string | symbol, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`Method ${String(propertyKey)} called with args: ${args}`);
    return originalMethod.apply(this, args);
  };
}

class MyClass {
  @Log
  myMethod(arg: number) {
    console.log('Inside myMethod');
  }
}

const instance = new MyClass();
instance.myMethod(42);

在这个例子中，@Log 是一个方法装饰器，它会在 myMethod 方法被调用时打印调用日志。

属性装饰器 (Property Decorator)

属性装饰器应用于类的属性。它接收两个参数：目标对象和属性名称。

示例：

function ReadOnly(target: any, propertyKey: string | symbol) {
  const descriptor = Object.getOwnPropertyDescriptor(target, propertyKey);
  if (descriptor) {
    descriptor.writable = false;
    Object.defineProperty(target, propertyKey, descriptor);
  }
}

class MyClass {
  @ReadOnly
  myProperty: number = 42;
}

const instance = new MyClass();
instance.myProperty = 24; // 这将不会生效，因为属性是只读的

在这个例子中，@ReadOnly 是一个属性装饰器，它使得 myProperty 属性变为只读。

访问器装饰器 (Accessor Decorator)

访问器装饰器应用于类的访问器（getter/setter）。它接收三个参数：目标对象、访问器名称和访问器描述符。

示例：

function UpperCase(target: any, propertyKey: string | symbol, descriptor: PropertyDescriptor) {
  const originalGet = descriptor.get;
  descriptor.get = function() {
    const value = originalGet!.apply(this);
    return value.toUpperCase();
  };
}

class MyClass {
  private _name: string = 'hello';

  @UpperCase
  get name() {
    return this._name;
  }
}

const instance = new MyClass();
console.log(instance.name); // 输出: HELLO