巧妙玩转装饰器，深入探索 TypeScript 进阶技巧

2023-07-08 04:10:21

TypeScript 中的装饰器：代码赋能的魔法师

在 JavaScript 的世界里，装饰器就如同魔法师手中的魔杖，它能赋予代码新的力量。在 TypeScript 中，装饰器更添光彩，让代码更加灵活、优雅，同时提升开发效率。

装饰器简介

装饰器是一种特殊的声明，可以附加到类声明、方法、属性或参数上，为被装饰的代码添加元数据或附加功能。它本质上是一个函数，会在运行时被调用，并将被装饰的声明信息作为参数传递给装饰器函数。

装饰器语法

装饰器的语法很简单，它由一个 @ 符号后跟一个函数调用组成。例如，以下代码为一个名为 MyDecorator 的类装饰器：

function MyDecorator(target: Function) {
  // 装饰器逻辑
}

@MyDecorator
class MyClass {
  // 类代码
}

在这个例子中，MyDecorator 装饰器被应用于 MyClass 类上。当 MyClass 类被创建时，MyDecorator 装饰器函数会被自动调用，并将 MyClass 类作为参数传递给装饰器函数。

装饰器的应用场景

装饰器可以用于各种场景，包括：

为类添加元数据，以便在运行时进行反射操作。
为方法添加日志记录或性能分析功能。
为属性添加验证或类型检查功能。
为参数添加类型检查或默认值设置功能。
装饰器组合，实现更复杂的装饰器功能。

代码示例

类装饰器

// 类装饰器
function LogClass(target: Function) {
  console.log(`类 ${target.name} 被创建！`);
}

// 应用装饰器
@LogClass
class Person {
  // 类代码
}

方法装饰器

// 方法装饰器
function LogMethod(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`方法 ${propertyKey} 被调用！`);
    return originalMethod.apply(this, args);
  };
}

// 应用装饰器
class Animal {
  @LogMethod
  speak() {
    console.log("喵喵叫");
  }
}

属性装饰器

// 属性装饰器
function ValidateProperty(target: Object, propertyKey: string | symbol) {
  let value: any;

  const getter = function() {
    return value;
  };

  const setter = function(newValue: any) {
    if (typeof newValue === "string") {
      value = newValue;
    } else {
      throw new Error("属性必须是字符串类型");
    }
  };

  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
  });
}

// 应用装饰器
class Student {
  @ValidateProperty
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

参数装饰器

// 参数装饰器
function MinLength(length: number) {
  return function(target: Object, propertyKey: string | symbol, parameterIndex: number) {
    const originalMethod = target[propertyKey] as Function;

    target[propertyKey] = function(...args: any[]) {
      const arg = args[parameterIndex];
      if (arg.length < length) {
        throw new Error(`参数 ${parameterIndex + 1} 的长度必须大于 ${length}`);
      }

      return originalMethod.apply(this, args);
    };
  };
}

// 应用装饰器
class Validator {
  @MinLength(3)
  validateString(str: string) {
    console.log(`验证字符串：${str}`);
  }
}