Vue3 runtime创建的 class 类型检查：TypeScript 也可以

Vue3 中使用 TypeScript 实现 runtime 创建的 class 的类型检查，支持 reactive 和 provide/inject。

在 Vue3 中，可以使用 class 来定义组件。在 TypeScript 中，可以使用泛型来对 class 进行类型检查。例如，我们可以定义一个名为 MyComponent 的组件，如下所示：

export class MyComponent<T> {
  data: T;

  constructor(data: T) {
    this.data = data;
  }

  render() {
    return this.data;
  }
}

在这个例子中，MyComponent 是一个泛型类，它可以接收任何类型的参数。在实例化 MyComponent 时，我们需要指定参数的类型。例如，我们可以如下所示实例化 MyComponent：

const myComponent = new MyComponent<{ name: string }>();

在这个例子中，myComponent 的 data 属性的类型是 { name: string }。这意味着 myComponent.data 可以是一个具有 name 属性的对象。

我们还可以使用 reactive() 函数来对 MyComponent 的数据进行响应式处理。例如，我们可以如下所示使用 reactive() 函数：

const myComponent = new MyComponent(reactive<{ name: string }>());

在这个例子中，myComponent.data 是一个响应式对象。这意味着当 myComponent.data 的值发生变化时，Vue3 将会自动更新视图。

我们还可以使用 provide() 和 inject() 函数来实现组件之间的通信。例如，我们可以如下所示使用 provide() 和 inject() 函数：

const app = Vue.createApp({
  provide: {
    myComponent: myComponent,
  },
});

const childComponent = {
  inject: ['myComponent'],

  render() {
    return this.myComponent.render();
  },
};

在这个例子中，app 组件提供了 myComponent 实例，childComponent 组件通过 inject() 函数来获取 myComponent 实例。这样，childComponent 组件就可以访问 myComponent 的数据和方法。

总之，Vue3 中可以使用 TypeScript 实现 runtime 创建的 class 的类型检查，支持 reactive 和 provide/inject。这使得我们在 Vue3 中使用 TypeScript 开发组件更加方便和安全。