使用 typescript 解构 API 响应答案

【问题标题】：Deconstruct API response with typescript使用 typescript 解构 API 响应
【发布时间】：2022-01-05 20:27:11
【问题描述】：

如何根据最佳实践使用 Typescript 解构此 API 响应？

<script setup lang="ts">
// Setup Directus data fetching
const { $directus } = useNuxtApp()
import { Bestyrelse } from "~/types/bestyrelse.interface"

// Fetch bestyrelse data
const { data: bestyrelse }: Bestyrelse[] = await $directus.items("bestyrelse").readMany()
</script>

我收到Property 'data' does not exist on type 'Bestyrelse[]'

【问题讨论】：

你应该在关键字const之后有一个成员名。示例：const myField: Array<Bestyrelse> = ....; 此外，您通常需要将使用await 的任何内容包装在标有async 的函数/方法中，但我不确定vue.js 是否有一些潜在的魔力可以为您做到这一点（参见这就是你标记的内容）。
.readMany()的返回类型是什么？

标签： typescript vue.js nuxt3

【解决方案1】：

const { data: bestyrelse }: Bestyrelse[] 表示{ data: bestyrelse } 是Bestyrelse[] 类型，这显然不是一个数组。我猜你的意思是data 是Bestyrelse[]，所以它会是这样的：

const { data: bestyrelse }: { data: Bestyrelse[] }

【讨论】：