用法
TypeScript 支持
Nuxt 内容 v2 是专为 TypeScript 设计的。
类型正确
该模块从配置到查询生成器都正确地公开类型。
用法
使用 queryContent()
时,您将检索到一个 QueryBuilder
实例。
使用其中一种获取方法(find()
、findOne()
、findSurround()
)后,您将检索到一个类型为 ParsedContent
的对象。
类型增强
如果您除了 默认键 之外还向前端添加了键,您可能希望对这些键进行类型化。
目前可以做到这一点,但不是以 *最佳* 的方式。
推荐的做法是使用这种方法
<script setup lang="ts">
import type { ParsedContent } from '@nuxt/content'
interface MyCustomParsedContent extends ParsedContent {
yourOwn: 'keys'
foo: 'bar'
baz: 'bar'
}
// That `data` key will be typed with `MyCustomParsedContent`
const { data } = await useAsyncData(
() => queryContent<MyCustomParsedContent>({ ...anyQuery })
)
</script>
Markdown 特定类型
如果您知道要获取的内容将是 Markdown,那么您可以扩展 MarkdownParsedContent
类型以提高类型安全性。
<script setup lang="ts">
import type { MarkdownParsedContent } from '@nuxt/content'
interface Article extends MarkdownParsedContent {
author: string
}
const { data } = await useAsyncData(
'first-article',
() => queryContent<Article>('articles').findOne()
)
// data.value.author will be typed as well as markdown specific entries
</script>
未来
TypeScript 支持是我们重点关注的领域。
我们希望为项目中的每个内容提供完全生成的类型,这将允许与类型增强相同的功能。
这尚未实现,但将在未来几个月内成为路线图的一部分。
如果您想了解有关前端键的 TypeScript 支持路线图的更多信息,可以关注 #1057。