typescript + Vue : What return Type to use for an object that contains a reactive() and ref() variable?

Question

我有一个 Vue 3 可组合函数。

它返回一个包含一个 reactive() 的对象变量和一个 ref()变量。

我想在此函数上设置一个返回类型以满足 eslint 错误。

但我是 Vue 和 TypeScript 的新手，不确定返回类型应该是什么。

• 如果我使用 unknown然后 TS 抛出错误 Object is of type 'unknown'.ts(2571)调用函数时。
• 如果我使用 any eslint 提示另一个错误，因为它不喜欢 any类型
• 如果我使用 object eslint 提示我应该使用 <Record<string, unknown>相反因为 object目前很难使用
• 如果我使用 <Record<string, unknown>然后我在函数本身上遇到了大量关于不可分配类型的错误。

那么我应该使用什么作为 useCollection()返回类型？

import { ref, reactive, watchEffect } from "vue";
import { projectFirestore } from "@/firebase/config";
import {
  query,
  orderBy,
  onSnapshot,
  DocumentData,
  collection,
} from "firebase/firestore";

const useCollection: any = (collectionPath: string) => { //<-- Need to replace this "any" with something else
  const documentsArray = reactive<Record<string, unknown>[]>([]);
  const error = ref<string | null>(null);
  // references
  const collectionReference = collection(projectFirestore, collectionPath);
  const collectionOrdered = query(
    collectionReference,
    orderBy("createdAt", "desc")
  );
  // updates
  const unsubscribe = onSnapshot(
    collectionOrdered,
    (snapshot) => {
      documentsArray.splice(0);
      snapshot.forEach((doc: DocumentData) => {
        documentsArray.push({ ...doc.data(), id: doc.id });
      });
      error.value = null;
    },
    (err) => {
      console.log(err.message);
      documentsArray.splice(0);
      error.value = err.message;
    }
  );
  watchEffect((onInvalidate) => {
    console.log("watchEffect fired");
    onInvalidate(() => {
      console.log("onInvalidate fired");
      unsubscribe();
    });
  });
  return { documentsArray, error };
};

export default useCollection;

Answer 1

reactive 返回与提供的对象类型相同的对象类型，内部引用被解包，根据指定的对象可以忽略。

ref 返回 Ref 类型。

对于这个函数，一个类型是:

(collectionPath: string) => { documentsArray: Record<string, unknown>[] , error: Ref<string | null> }

可能不需要为 useCollection 变量指定类型，因为它是从函数中推断出来的。返回类型是从单个返回值 { documentsArray, error } 推断出来的，其中 documentsArray 和 error 都是常量，它们的类型是在分配。

如果一个类型需要比推断的类型更具体，例如集合值是已知的，这是由泛型处理的:

const useCollection = <T extends unknown = unknown>(collectionPath: string) => {
  const documentsArray = reactive<Record<string, T>[]>([]);
  const error = ref<string | null>(null);
  ...

const c = useCollection<string | number>(...);