用法

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。