装饰器为你保驾护航，TypeScript装饰器用法快速上手指南

2024-02-03 20:07:58

TypeScript 装饰器：增强代码可读性、可维护性和可扩展性的指南

什么是 TypeScript 装饰器？

TypeScript 装饰器是一种高级特性，允许开发者通过特殊函数来修改类、方法、属性和参数的行为。这些函数可以让你的代码更具可读性、可维护性和可扩展性。

装饰器的语法

使用装饰器非常简单，只需在类、方法、属性或参数前面加上一个 @ 符号，然后跟上装饰器函数的名称即可。例如：

@logger
class MyClass {
  // ...
}

此装饰器在 MyClass 类实例化时会打印出类名。

装饰器的用途

装饰器可以用于实现各种用途，包括：

添加元数据： 为类、方法、属性或参数添加任意类型的数据，以便存储有关其的信息。
修改行为： 改变类的行为、方法的行为、属性的行为甚至参数的行为。
代码复用： 通过创建可重复使用的装饰器函数来避免重复代码，例如为多个类添加日志功能。

装饰器的类型

TypeScript 中有四种类型的装饰器：

1. 类装饰器

修改类的行为。

@logger
class MyClass {
  // ...
}

2. 方法装饰器

修改方法的行为。

@cache
class MyClass {
  @cache
  public myMethod() {
    // ...
  }
}

3. 属性装饰器

修改属性的行为。

@validate
class MyClass {
  @validate
  public myProperty: string;
}

4. 参数装饰器

修改参数的行为。

@typeCheck
class MyClass {
  public myMethod(@typeCheck num: number) {
    // ...
  }
}

装饰器工厂

装饰器工厂函数可以返回一个装饰器函数。这可以让你创建自定义装饰器。

const loggerFactory = (level: string) => {
  return (target: any) => {
    // ...
  };
};

这个工厂可以用来创建日志装饰器：

@loggerFactory('INFO')
class MyClass {
  // ...
}

代码示例

类装饰器：添加日志功能

const logger = (target: any) => {
  console.log(`Class: ${target.name}`);
};

@logger
class MyClass {
  // ...
}

const myClass = new MyClass(); // 输出：Class: MyClass

方法装饰器：添加缓存功能

const cache = (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
  const originalMethod = descriptor.value;

  descriptor.value = function(...args: any[]) {
    const cacheKey = JSON.stringify(args);
    if (cacheKey in this.__cache) {
      return this.__cache[cacheKey];
    }

    const result = originalMethod.apply(this, args);
    this.__cache[cacheKey] = result;
    return result;
  };
};

class MyClass {
  private __cache: Record<string, any> = {};

  @cache
  public myMethod() {
    // ...
  }
}

属性装饰器：添加验证功能

const validate = (target: any, propertyKey: string) => {
  let value: any;

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

  const setter = function(newValue: any) {
    if (typeof newValue === 'string' && newValue.length > 0) {
      value = newValue;
    } else {
      throw new Error('Invalid property value');
    }
  };

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

class MyClass {
  @validate
  public myProperty: string;
}

参数装饰器：添加类型检查功能

const typeCheck = (target: any, propertyKey: string, parameterIndex: number) => {
  const expectedType = Reflect.getMetadata('design:type', target, propertyKey)[parameterIndex];

  const typeCheckFn = function(value: any) {
    if (typeof value !== expectedType) {
      throw new Error(`Invalid parameter type: ${typeof value}`);
    }
  };

  return typeCheckFn;
};

class MyClass {
  public myMethod(@typeCheck num: number) {
    // ...
  }
}