提问人：EricTalv 提问时间：11/1/2023 最后编辑：LazyOneEricTalv 更新时间：11/1/2023 访问量：21
WebStorm 无法识别 Nuxt 3 ContentQuery 组件数据类型
Nuxt 3 ContentQuery component data types not recognized by WebStorm
问：
我正在尝试使用内置组件，如下所示：ContentQuery
<ContentQuery
path="/posts"
>
<template #default="{ data }">
<pre></pre>
<ul class="post-list">
<li v-for="post in data" :key="post._path" class="post-list__item">
<PostListItem :post-data="post" />
</li>
</ul>
</template>
<template #not-found>
<p>No posts found.</p>
</template>
</ContentQuery>
代码和逻辑有效，我特别面临的问题是，在我的组件中有一个类型，因此在访问发布数据的属性时，WebStorm 会变得大惊小怪。我该如何解决这个问题？PostListItempost-dataany
答：
0赞
EricTalv
11/1/2023
#1
我想我想通了。
我看了一下很棒的开胃菜
经过更多的解密，我想出了这个：
PostListItem.vue 文件
<script setup lang="ts">
import { defineProps } from "vue";
import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
defineProps<{ postData: ParsedContent }>();
</script>
我正在使用 TypeScript 4.8.4（捆绑），也许这可能是我必须显式导入 defineProps 的原因，否则这成功了，我现在正在获得完整的 postData 自动完成，ParsedContent 导入看起来确实有点奇怪。
编辑：
但是，我确实注意到，如果我有自定义的前端，那当然不会被键入，所以我这样做是为了扩展它们：
interface PostDataTypes extends ParsedContent {
date?: string;
}
评论