如何解构一个可组合的？

Question

我在使用 TypeScript 从可组合的 Vue 3 中解构引用时遇到问题。

在下面的示例中，我试图从 getDocument 可组合中解构 document 和 error 引用。

第一次尝试：

在第一次尝试中，我尝试使用{ [key: string]: string | undefined } 的索引签名为document ref 提供一个非常通用的类型。我认为这将允许我返回任何形状的文档而不会出错。 Spolier：我错了，它在 Vue 模板中产生了很多错误。

这是 Vue 3 SFC：

<template>
  <div v-if="document">
    <img :src="document.coverUrl" />
    <div v-if="!document.songs.length">No songs</div> //Error #1 detailed below
    <div v-for="song in document.songs" :key="song.id">{{ song.title }}</div> //Errors #2, #3, and #4 detailed below
    <div v-if="error">{{ error }}</div>
  </div>
</template>

<script setup lang="ts">
import getDocument from "@/composables/getDocument";
const { error, document } = getDocument("9Tn765FhtBa2");
</script>

这是 getDocument 可组合（带有 Pseduo 代码的精简版）：

import { ref, Ref } from "vue";

const getDocument = (
  docId: string
): {
  document: Ref<{ [key: string]: string | undefined } | null>;
  error: Ref<string | null>;
} => {
  const document = ref<{ [key: string]: string | undefined } | null>(null);
  const error = ref<string | null>(null);

  const docFromDatabase = getdocFromDatabase(docId);
  document.value = {
    ...docFromDatabase.data(),
    id: docFromDatabase.id,
  };
  error.value = "Some error text here";

  return { document, error };
};

export default getDocument;

在此尝试期间，它在 Vue SFC 的模板中产生了许多错误：

1. v-if="!document.songs.length" 的错误为Object is possibly 'undefined'.
2. v-for="song in document.songs" 的错误为The right-hand side of a 'for...in' statement must be of type 'any', an object type or a type parameter, but here has type 'string'.ts(2407)
3. :key="song.id" 的错误为Property 'id' does not exist on type 'string'.ts(2339)
4. {{ song.title }} 的错误为Property 'title' does not exist on type 'string'.ts(2339)

第二次尝试：

在第二次尝试中，我尝试创建 Playlist 接口并将其作为泛型类型传递给可组合函数。这解决了所有 SFC 模板错误，但在可组合项中创建了一个不同的错误：

<template>
  <div v-if="document">
    <img :src="document.coverUrl" />
    <div v-if="!document.songs.length">No songs</div>
    <div v-for="song in document.songs" :key="song.id">{{ song.title }}</div>
    <div v-if="error">{{ error }}</div>
  </div>
</template>

<script setup lang="ts">
import getDocument from "@/composables/getDocument";
interface Playlist {
  coverUrl: string;
  createdAt: string;
  description: string;
  filePath: string;
  songs: { [key: string]: string | number }[];
  title: string;
  userId: string;
  userName: string;
  id: string;
}
const { error, document } = getDocument<Playlist>("9Tn765FhtBa2");
</script>

这是新的getDocument 可组合：

import { ref, Ref } from "vue";

const getDocument = <T>(
  docId: string
): {
  document: Ref<T | null>;
  error: Ref<string | null>;
} => {
  const document = ref<T | null>(null);
  const error = ref<string | null>(null);

  const docFromDatabase = getdocFromDatabase(docId);
  document.value = {
    ...docFromDatabase.data(),
    id: docFromDatabase.id,
  };
  error.value = "Some error text here";

  return { document, error }; // Error on "document" is detailed below
};

export default getDocument;

这解决了 SFC 中的所有错误。但是现在可组合在返回的document ref 的底部有一个非常复杂的错误：

Type 'Ref<UnwrapRef<T> | null>' is not assignable to type 'Ref<T | null>'.
  Type 'UnwrapRef<T> | null' is not assignable to type 'T | null'.
    Type 'UnwrapRef<T>' is not assignable to type 'T | null'.
      Type 'unknown' is not assignable to type 'T | null'.
        Type 'unknown' is not assignable to type 'T'.
          'T' could be instantiated with an arbitrary type which could be unrelated to 'unknown'.ts(2322)
getDocumentT.ts(6, 3): The expected type comes from property 'document' which is declared here on type '{ document: Ref<T | null>; error: Ref<string | null>; }'

Answer 1

我找到了两个解决方案。

第一个解决方案

正如 @EstusFlask 在 cmets 中提到的，我可以删除返回类型。

在这种情况下，可组合的 beomes：

import { ref } from "vue";

const getDocument = <T>(docId: string) => {
  const document = ref<T | null>(null);
  const error = ref<string | null>(null);

  const docFromDatabase = getdocFromDatabase(docId);

  document.value = {
    ...docFromDatabase.data(),
    id: docFromDatabase.id,
  };

  error.value = "Some error text here";

  return { document, error };
};

export default getDocument;

第二个解决方案

我发现的另一种方法是保留返回类型，但使用const document = ref(null) as Ref<T | null>; 将document 转换为Ref<T | null>。

这也消除了document 上的错误，并具有满足 ESLint 的额外好处，当复杂函数没有返回类型时会抱怨。

import { ref, Ref } from "vue";

const getDocument = <T>(
  docId: string
): {
  document: Ref<T | null>;
  error: Ref<string | null>;
} => {
  const document = ref(null) as Ref<T | null>;
  const error = ref<string | null>(null);

  const docFromDatabase = getdocFromDatabase(docId);

  document.value = {
    ...docFromDatabase.data(),
    id: docFromDatabase.id,
  };

  error.value = "Some error text here";

  return { document, error };
};

export default getDocument;