vue3+ts的api.ts文件应该怎么写

在Vue3中，您可以使用Composition API来编写组件。在API.ts文件中，您可以定义一个常规的JavaScript模块，该模块导出用于与组件交互的函数和对象。

以下是一个示例API.ts文件的代码：

import { ref } from 'vue';

export function useCounter(initialValue: number) {
  const count = ref(initialValue);

  function increment() {
    count.value++;
  }

  function decrement() {
    count.value--;
  }

  return {
    count,
    increment,
    decrement
  };
}

在这个示例中，我们导出了一个名为useCounter的函数，该函数接受一个数字作为初始值，并返回一个包含计数器状态和两个更新计数器状态的函数的对象。

在组件中，您可以使用组合API的createXXXHook函数来创建一个自定义的组合API函数。例如，在使用useCounter函数的组件中，您可以这样编写：

import { defineComponent } from 'vue';
import { useCounter } from './API';

export default defineComponent({
  setup() {
    const { count, increment, decrement } = useCounter(0);

    return {
      count,
      increment,
      decrement
    };
  }
});

在这个示例中，我们调用了useCounter函数，并将其结果解构为count、increment和decrement变量。这些变量可以在模板中使用，以显示计数器状态和更新计数器状态。

需要注意的是，由于使用了TypeScript，您需要在API.ts文件中为每个导出的函数和对象添加类型注释。