📝
nuxt/content x TypeScript コンテンツを取得する際に型指定する
本記事では $content.fetch を使用する際に型指定する方法を記載します。
はじめに: nuxt/content とは
content/ 配下の Markdown などのファイルを全文検索・取得が行える NuxtJS のモジュールです。
TypeScript にも対応しています。導入手順はこちら。
本題
$content.fetch はジェネリクスが使える
👆のドキュメントの通り、コンテンツの取得は$content.fetchを使用します。
packages/content/types/query-builder.d.tsを読んでみると、ジェネリクスが利用可能であるとわかります。次は該当箇所を抜粋しています。
packages/content/types/query-builder.d.ts#L87
// 省略
export class QueryBuilder {
// 省略
fetch<T>(): Promise<(T & FetchReturn) | (T & FetchReturn)[]>;
}
FetchReturn は Markdown などのコンテンツ取得時に解析・付与される「作成日時、見出し」などのプロパティのことです。詳しくは次のソースを参照してください。
FetchReturn に加えて、コンテンツ取得時に Markdown のフロントマターをプロパティとして追加してくれます。[1]
ジェネリクス T に指定するのは、このフロントマターで付与されるプロパティの型になります。
コードサンプル: コンテンツを取得する際に型指定する
content/articles/test.md
---
title: テスト
description: はじめてのブログ記事
---
〜本文〜
👆のような Markdown を型指定して取得したい場合は、次のように記載します。
pages/index.vue
// コンテンツ取得の部分を抜粋して記載しています
<script setup lang="ts">
import { useAsync, useContext } from '@nuxtjs/composition-api'
export type Article = {
title: string
description: string
}
const { $content } = useContext()
// (Article & FetchReturn) | (Article & FetchReturn)[]
// として推論される
const articles = useAsync(
async () => await $content('articles', { deep: true }).fetch<Article>()
)
</script>
おわり
nuxt/content を用いた際、自分は次のようにコンテンツ取得の際の型指定を行なっています。
見苦しいかもしれませんが、参考になれば幸いです。
Discussion