TypeScript 5.0 新版装饰器（Stage 3）：与旧版实验性装饰器的本质区别

引言

TypeScript 作为 JavaScript 的超集，提供了丰富的语言特性，其中装饰器（Decorators）是近年来备受关注的新特性。TypeScript 5.0 引入了新版装饰器（Stage 3），与旧版的实验性装饰器相比，具有许多本质区别。本文将深入探讨这些区别，并通过实际代码示例展示新版装饰器的优势。

装饰器概述

装饰器是一种特殊的声明，用于修饰类、类方法、访问器、属性或参数。它允许开发者在不修改原有代码结构的情况下，对代码进行扩展和增强。在 TypeScript 中，装饰器通常用于实现元编程，如日志记录、权限验证、依赖注入等。

旧版实验性装饰器

在 TypeScript 3.6 版本之前，装饰器处于实验性阶段，只能用于类和类成员。以下是一个简单的示例：

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

class MyClass {
  @logMethod
  public method() {
    console.log('Method body');
  }
}

在上面的示例中，logMethod 装饰器用于记录 MyClass 类中 method 方法的调用。

新版装饰器（Stage 3）

TypeScript 5.0 引入的新版装饰器（Stage 3）具有以下特点：

扩展性：支持更多类型的装饰器，如模块装饰器、参数装饰器等。
可配置性：允许自定义装饰器行为，如装饰器工厂、装饰器元数据等。
性能优化：减少装饰器对性能的影响。

新版装饰器与旧版实验性装饰器的本质区别

1. 装饰器类型

旧版实验性装饰器仅支持类和类成员，而新版装饰器支持以下类型：

装饰器类型	旧版实验性装饰器	新版装饰器
类装饰器	支持	支持
方法装饰器	支持	支持
属性装饰器	支持	支持
参数装饰器	不支持	支持
访问器装饰器	支持	支持
参数装饰器	支持	支持
模块装饰器	不支持	支持

2. 装饰器工厂

旧版实验性装饰器不支持装饰器工厂，而新版装饰器允许使用装饰器工厂来创建装饰器。以下是一个使用装饰器工厂的示例：

function logMethodFactory(logLevel: 'info' | 'debug') {
  return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function(...args: any[]) {
      console.log(`${logLevel} Method ${propertyKey} called with arguments:`, args);
      return originalMethod.apply(this, args);
    };
    return descriptor;
  };
}

class MyClass {
  @logMethodFactory('info')
  public method() {
    console.log('Method body');
  }
}

在上面的示例中，logMethodFactory 是一个装饰器工厂，它根据传入的 logLevel 参数创建不同的装饰器。

3. 装饰器元数据

旧版实验性装饰器不支持装饰器元数据，而新版装饰器允许使用 @decorator metadata 来获取装饰器信息。以下是一个使用装饰器元数据的示例：

function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args: any[]) {
    const metadata = Reflect.getMetadata('log', target, propertyKey);
    console.log(`${metadata} Method ${propertyKey} called with arguments:`, args);
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

class MyClass {
  @logMethod
  public method() {
    console.log('Method body');
  }
}
Reflect.defineMetadata('log', 'info', MyClass.prototype, 'method');

在上面的示例中，Reflect.getMetadata 用于获取 method 方法的 log 元数据，并将其用于日志记录。

实际代码示例

以下是一些使用新版装饰器的实际代码示例：

1. 日志记录

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

class MyClass {
  @logMethod
  public method() {
    console.log('Method body');
  }
}

2. 权限验证

function requireAdmin(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args: any[]) {
    if (!this.isAdmin) {
      throw new Error('You do not have permission to perform this action.');
    }
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

class MyClass {
  private isAdmin: boolean = false;

  @requireAdmin
  public method() {
    console.log('Method body');
  }
}

3. 依赖注入

function injectDependency(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args: any[]) {
    const dependency = this.getDependency();
    this[propertyKey] = dependency;
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

class MyClass {
  private dependency: any;

  @injectDependency
  public setDependency(dependency: any) {
    this.dependency = dependency;
  }

  public getDependency() {
    // 获取依赖项的逻辑
  }

  public method() {
    console.log('Method body');
  }
}

总结

TypeScript 5.0 新版装饰器（Stage 3）与旧版实验性装饰器相比，具有许多本质区别。新版装饰器提供了更丰富的功能，如装饰器工厂、装饰器元数据等，使得开发者可以更灵活地使用装饰器。通过本文的介绍和代码示例，相信读者已经对新版装饰器有了更深入的了解。在实际开发中，合理运用装饰器可以大大提高代码的可读性和可维护性。