컨텐트를 가져올 때 유형 지정

nuxt/content v1.15.0시 정보.
이 글은 $content.fetch를 사용할 때 유형을 지정하는 방법을 기록하고 있다.

시작:nuxt/content

content/ 부하의 Markdown 등 파일을 전문 검색하여 얻을 수 있는 NuxtJS 모듈.
https://content.nuxtjs.org/ja/
Type Script도 지원됩니다.도입 절차는여기.이다.

메시지

$content.fetchGenerics 사용 가능

https://content.nuxtjs.org/ja/fetching
👆를 참고하십시오.
packages/content/types/query-builder.d.ts를 읽으면 Generix를 사용할 수 있습니다.이어서 상응하는 부분을 발췌하였다.
packages/content/types/query-builder.d.ts#L87

// 省略
export class QueryBuilder {
  // 省略
  fetch<T>(): Promise<(T & FetchReturn) | (T & FetchReturn)[]>;
}

$content.fetch는 Mardown 등의 내용을 취득할 때 해석하고 부여하는'제작 날짜, 제목'등의 속성이다.상세한 상황은 아래의 출처를 참조하시오.

packages/content/types/content.d.ts

packages/content/types/query-builder.d.ts

FetchReturn 이외에 내용을 가져올 때 Mardown의 앞 재료를 속성으로 추가합니다.[1]
제네릭스FetchReturn에서 지정한 것은 이 선행 재료가 부여한 속성 유형이다.

코드 샘플: 내용을 가져올 때의 종류를 지정합니다

content/articles/test.md

---
title: テスト
description: はじめてのブログ記事
---

〜本文〜

👆Mardown을 가져오는 유형을 지정하려면 다음과 같이 기재하십시오.

코드 샘플 사용T.

setup 기재법 사용@nuxtjs/composition-api.

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>

끝맺다

unplugin-vue2-script-setup를 사용할 때 내용을 얻을 때의 유형을 다음과 같이 지정합니다.

composables/post.ts

보기 싫을 수도 있지만 참고가 됐으면 좋겠어요.
각주
참조https://content.nuxtjs.org/ja/writing#markdown.↩︎