如何将类型添加到组合中的计算 api vue 3

Question

问题 - 我尝试向计算中添加类型，但出现错误： Overload 1 of 2, '(getter: ComputedGetter<AuthFormType>, debugOptions?: DebuggerOptions | undefined): ComputedRef<AuthFormType>', gave the following error 。 如何将类型添加到计算中？

Auth.vue

type AuthFormType = 'Form1' | 'Form2';
const getForm = computed<AuthFormType>(
  () => tabs.value.find((tab) => tab.id === currentTab.value)!.component, // will return Form1 or Form2
);

如果我添加简单类型 - 字符串，如 doc https://vuejs.org/guide/typescript/composition-api.html#typing-computed如果可行，但我需要添加类型 AuthFormType

Answer 1

计算属性通常不需要键入，因为它们的键入是由返回值推断的。

正如我的 VS Code“查看类型定义”hover 操作所示，正确推断了ComputedRef<AuthFormType>的正确类型。 如果您仍想明确键入计算属性，您可以导入并使用相同的ComputedRef接口

import { computed, ref, ComputedRef } from 'vue';
import type { Ref } from 'vue';

interface tabObj {
  id: number;
  component: AuthFormType;
}
const tabs: Ref<tabObj[]> = ref([]);
const currentTab = ref(0);

type AuthFormType = 'Form1' | 'Form2';
const getForm: ComputedRef<AuthFormType> = computed(
  (): AuthFormType =>
    tabs.value.find(tab => tab.id === currentTab.value)!.component
);