`h` 函数应该如何正确地在 Vue3 中声明类型？

在 Vue3 中，当你使用 TypeScript 编程时，`h` 函数实际上是 JSX 的语法糖，它代表了 `createElement` 方法。为了给 `h` 函数添加类型安全性，你需要对它的参数进行类型注解。通常，第一个参数是你想要渲染的组件或元素类型，其他参数则是传递给该组件的选项或属性。

下面是一个简单的例子，展示了如何正确地声明 `h` 函数的类型：

import { Component, Prop } from "vue";
type VNode = Component<any, any, any>;

interface Props {
  message: string;
}

@Component({
  props: {
    message: Prop<string>,
  },
})
export default class HelloWorld extends Vue {
  // ...
}

// 使用类型安全的 h 函数
function h<T extends VNode>(tag: ComponentType<T>, propsData?: T["props"] & Record<string, unknown>) {
  return {
    tag,
    data: () => ({}),
    props: propsData,
  };
}

const myElement = h(HelloWorld, { message: 'Hello, TypeScript!' });

在这个例子中，`VNode` 类型代表 Vue 的虚拟节点，`T extends VNode` 表示可以是任何类型的 Vue 组件。`Props` 对象定义了组件的预期 prop。