JS `Decorator` (Stage 3) `Metadata Reflection API` (提案) 与类型系统集成

各位靓仔靓女，晚上好！我是你们的老朋友，今天咱们来聊聊一个有点意思的话题：JS装饰器（Stage 3）、元数据反射API（提案）以及它们和类型系统的爱恨情仇。准备好，我们要发车了！

第一部分：装饰器，你这磨人的小妖精！

啥是装饰器？别被“装饰”这两个字迷惑了，它可不是给你家房子贴壁纸的工具。在编程世界里，装饰器更像是一种“AOP”（面向切面编程）的思想的体现。简单来说，它允许你在不修改原有代码结构的前提下，给类、方法、属性等“偷偷地”添加一些额外的功能。

装饰器的基本语法长这样：

@decorator
class MyClass {
  @readonly
  myProperty = 'Hello';

  @log
  myMethod(arg) {
    console.log('My method called with:', arg);
  }
}

看到 @ 符号了吗？这就是装饰器的标志。@decorator、@readonly、@log 都是装饰器。它们分别“装饰”了 MyClass 类、myProperty 属性和 myMethod 方法。

那么，这些装饰器到底做了啥？咱们来一个个揭秘：

• 类装饰器： 顾名思义，装饰的是类本身。它可以修改类的构造函数、原型等等。

  function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
  }
  
  @sealed
  class BugReport {
    constructor(public id: number) {}
  }
  
  // 试试修改 BugReport，会报错哦！

  上面的 sealed 装饰器会把类和它的原型都 "封印" 起来，让它们不可修改。是不是有点像给类穿了件防弹衣？

• 方法装饰器： 装饰的是类的方法。可以修改方法的行为，比如添加日志、权限验证等等。

  function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
  
    descriptor.value = function(...args: any[]) {
      console.log(`Calling method ${propertyKey} with arguments:`, args);
      const result = originalMethod.apply(this, args);
      console.log(`Method ${propertyKey} returned:`, result);
      return result;
    };
  
    return descriptor;
  }
  
  class MyClass {
    @log
    myMethod(arg: string): string {
      return `You said: ${arg}`;
    }
  }
  
  const myInstance = new MyClass();
  myInstance.myMethod('Hello, world!');

  log 装饰器会在 myMethod 执行前后打印日志。就像一个尽职尽责的 “场记”，记录下方法的调用情况。

• 属性装饰器： 装饰的是类的属性。可以修改属性的访问方式，比如实现只读属性、数据验证等等。

  function readonly(target: any, propertyKey: string) {
    Object.defineProperty(target, propertyKey, {
      writable: false,
    });
  }
  
  class MyClass {
    @readonly
    myProperty = 'Hello';
  }
  
  const myInstance = new MyClass();
  // myInstance.myProperty = 'Goodbye'; // 报错！Cannot assign to read only property 'myProperty' of object

  readonly 装饰器让 myProperty 变成了只读属性，试图修改它会报错。就像给属性加了一把锁，防止被意外篡改。

• 参数装饰器： 装饰的是方法的参数。可以用来收集参数信息，或者对参数进行验证。

  function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
      console.log("required decorator called");
  }
  
  class Greeter {
      greeting: string;
  
      constructor(message: string) {
          this.greeting = message;
      }
  
      greet(@required name: string) {
          return "Hello " + name + ", " + this.greeting;
      }
  }

  required 装饰器可以标记必须的参数。虽然这个例子没做什么实际操作，但你可以想象它在运行时检查参数是否为空，如果为空就抛出异常。

第二部分：元数据反射，让装饰器更强大！

装饰器本身很强大，但如果能获取到被装饰对象的更多信息，那岂不是更上一层楼？这就是元数据反射 API 的作用。

元数据反射 API 允许你在运行时获取到类、方法、属性等的元数据信息，比如类型、注解等等。有了这些信息，装饰器可以做更多的事情，比如自动进行类型转换、依赖注入等等。

要使用元数据反射 API，你需要先安装 reflect-metadata 包：

npm install reflect-metadata --save

然后在你的代码中引入它：

import 'reflect-metadata';

接下来，我们就可以使用 Reflect 对象上的方法来获取和设置元数据了。

常用的方法有：

• Reflect.defineMetadata(key, value, target, propertyKey)：给目标对象（类、方法、属性）设置元数据。
• Reflect.getMetadata(key, target, propertyKey)：获取目标对象的元数据。
• Reflect.hasMetadata(key, target, propertyKey)：判断目标对象是否拥有某个元数据。
• Reflect.getOwnMetadata(key, target, propertyKey)：获取目标对象自身的元数据（不包括继承的）。
• Reflect.getMetadataKeys(target, propertyKey)：获取目标对象的所有元数据键。
• Reflect.getOwnMetadataKeys(target, propertyKey)：获取目标对象自身的所有元数据键。
• Reflect.deleteMetadata(key, target, propertyKey)：删除目标对象的元数据。

举个例子，我们可以使用元数据反射 API 来实现一个简单的依赖注入容器：

import 'reflect-metadata';

const dependencies = new Map();

function Injectable(target: any) {
  dependencies.set(target, new target());
}

function Inject(target: any, propertyKey: string, parameterIndex: number) {
  const paramType = Reflect.getOwnMetadata('design:paramtypes', target, propertyKey)[parameterIndex];
  target[propertyKey] = dependencies.get(paramType);
}

@Injectable
class Logger {
  log(message: string) {
    console.log(`[LOG] ${message}`);
  }
}

class UserService {
  logger: Logger;

  constructor(@Inject logger: Logger) {
    this.logger = logger;
  }

  createUser(name: string) {
    this.logger.log(`Creating user: ${name}`);
  }
}

const userService = new UserService(new Logger()); //不需要手动传入Logger实例
userService.createUser('Alice');

在这个例子中，@Injectable 装饰器将 Logger 类注册到依赖注入容器中。@Inject 装饰器告诉 UserService 构造函数，需要从容器中获取 Logger 实例并注入到 logger 属性中。

第三部分：类型系统，让代码更健壮！

JavaScript 是一门动态类型语言，这意味着变量的类型是在运行时确定的。虽然这带来了很大的灵活性，但也容易导致一些运行时错误。

类型系统可以帮助我们在编译时发现这些错误，提高代码的健壮性。TypeScript 就是 JavaScript 的一个超集，它添加了静态类型检查和其他一些有用的特性。

那么，装饰器和类型系统有什么关系呢？

• 类型声明： 装饰器可以用来声明类型信息。比如，我们可以使用装饰器来标记一个属性的类型：

  import 'reflect-metadata';
  
  function Type(type: any) {
    return Reflect.metadata('design:type', type);
  }
  
  class MyClass {
    @Type(String)
    myProperty: string;
  }
  
  const propertyType = Reflect.getMetadata('design:type', MyClass.prototype, 'myProperty');
  console.log(propertyType); // 输出：[Function: String]

  在这个例子中，@Type 装饰器将 myProperty 的类型信息存储在元数据中。我们可以在运行时通过 Reflect.getMetadata 方法获取到这个类型信息。

• 类型检查： 装饰器可以用来进行类型检查。比如，我们可以使用装饰器来验证方法的参数类型：

  import 'reflect-metadata';
  
  function Validate(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    const paramTypes = Reflect.getMetadata('design:paramtypes', target, propertyKey);
  
    descriptor.value = function(...args: any[]) {
      for (let i = 0; i < paramTypes.length; i++) {
        if (typeof args[i] !== typeof new paramTypes[i]()) {
          throw new Error(`Invalid argument type for parameter ${i}`);
        }
      }
      return originalMethod.apply(this, args);
    };
  
    return descriptor;
  }
  
  class MyClass {
    @Validate
    myMethod(name: string, age: number) {
      console.log(`Name: ${name}, Age: ${age}`);
    }
  }
  
  const myInstance = new MyClass();
  myInstance.myMethod('Alice', 30); // 正常执行
  // myInstance.myMethod('Alice', '30'); // 报错：Invalid argument type for parameter 1

  在这个例子中，@Validate 装饰器会在 myMethod 执行前检查参数类型是否正确。如果类型不匹配，就会抛出异常。

• 代码生成： 装饰器可以用来生成代码。比如，我们可以使用装饰器来自动生成 API 请求代码：

  // 假设我们有一个 API 接口描述文件：
  // api.json:
  // {
  //   "/users": {
  //     "get": {
  //       "responseType": "User[]"
  //     },
  //     "post": {
  //       "requestType": "CreateUserRequest",
  //       "responseType": "User"
  //     }
  //   }
  // }
  
  import 'reflect-metadata';
  
  function Api(path: string, method: string) {
    return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
      // 在这里读取 api.json 文件，根据 path 和 method 生成 API 请求代码
      // 并修改 descriptor.value，使其执行生成的 API 请求代码
      // （具体实现比较复杂，这里省略）
      console.log(`Generating API request for ${path} ${method}`);
    };
  }
  
  class UserService {
    @Api('/users', 'get')
    getUsers(): Promise<User[]> {
      // 这个方法会被自动生成的 API 请求代码替换
      return Promise.resolve([]);
    }
  
    @Api('/users', 'post')
    createUser(request: CreateUserRequest): Promise<User> {
      // 这个方法也会被自动生成的 API 请求代码替换
      return Promise.resolve(null);
    }
  }

  在这个例子中，@Api 装饰器会读取 API 接口描述文件，根据 path 和 method 生成 API 请求代码，并替换掉 getUsers 和 createUser 方法的实现。

第四部分：总结与展望

咱们今天一起溜达了一圈，了解了 JS 装饰器、元数据反射 API 以及它们与类型系统的关系。

简单总结一下：

特性	作用	优点	缺点
装饰器	在不修改原有代码结构的前提下，给类、方法、属性等添加额外的功能。	提高代码的可读性、可维护性、可重用性。	学习成本较高，调试困难。
元数据反射 API	在运行时获取类、方法、属性等的元数据信息，比如类型、注解等等。	让装饰器可以做更多的事情，比如自动进行类型转换、依赖注入等等。	增加代码的复杂性，性能开销。
类型系统	在编译时进行类型检查，提高代码的健壮性。	减少运行时错误，提高代码的可读性、可维护性。	增加开发时间，需要编写类型声明。

展望未来，随着 JavaScript 的不断发展，装饰器、元数据反射 API 和类型系统将会扮演越来越重要的角色。它们将帮助我们编写更加健壮、可维护、可扩展的代码。

当然，这些技术也存在一些挑战。比如，装饰器的兼容性问题、元数据反射 API 的性能开销等等。我们需要在实践中不断探索，找到最佳的使用方式。

好了，今天的分享就到这里。希望大家有所收获！如果有什么问题，欢迎随时提问。咱们下期再见！