vue3 + ts Function怎么声明

在 Vue 3 中结合 TypeScript 使用函数组件，你需要声明它们以便 TypeScript 可以理解和提供类型安全。函数组件通常包含一个 `setup` 函数，它接收 props、state、以及生命周期钩子，并返回一个 render 函数。下面是一个基本的例子：

// 定义一个名为 MyComponent 的函数组件
function MyComponent({ propA: a, propB: b }: { propA: string; propB: number }) {
  // setup 钩子，可以在此处理数据初始化和其他设置
  const someState = ref<string>('default value');

  // 返回 render 函数
  function render() {
    return (
      <div>
        Prop A: {a} <br />
        Prop B: {b} <br />
        State: {someState.value}
      </div>
    );
  }

  return {
    render,
    // 如果有其他生命周期钩子，如 created, beforeUpdate 等，也应在这里定义
  };
}

// 使用组件
<template>
  <MyComponent propA="Hello" propB={42} />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
</script>

在这个例子中，我们声明了组件接受两个属性 `propA` 和 `propB`，并且 `someState` 是一个受 `ref` 构造函数约束的变量。