feat(types): expose MarkdownParsedContent for improved type generics (

#1199)

docs/content/3.guide/2.displaying/4.typescript.md

@@ -39,6 +39,27 @@ const { data } = await useAsyncData(
 </script>
 ```
 
+## Markdown Specific Types
+
+If you know the content being fetched will be Markdown, then you can extend the `MarkdownParsedContent`{lang="ts"} type for improved
+type-safety.
+
+```vue
+<script setup lang="ts">
+import type { MarkdownParsedContent } from '@nuxt/content/dist/runtime/types'
+
+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>
+```
+
+
 ## The future
 
 TypeScript support is a strong focus for us.

src/runtime/markdown-parser/index.ts

@@ -8,7 +8,7 @@ import remarkGfm from 'remark-gfm'
 import rehypeSortAttributeValues from 'rehype-sort-attribute-values'
 import rehypeSortAttributes from 'rehype-sort-attributes'
 import rehypeRaw from 'rehype-raw'
-import { MarkdownOptions, Toc } from '../types'
+import { MarkdownOptions, MarkdownParsedContent, Toc } from '../types'
 import { parseFrontMatter } from './remark-mdc/frontmatter'
 import { generateToc } from './toc'
 import { contentHeading, generateBody } from './content'
@@ -61,7 +61,7 @@ export async function parse (file: string, userOptions: Partial<MarkdownOptions>
    */
   const heading = contentHeading(body)
 
-  return {
+  return <{ meta: Partial<MarkdownParsedContent>, body: MarkdownParsedContent['body'] }> {
     body: {
       ...body,
       toc

src/runtime/server/transformers/markdown.ts

@@ -1,5 +1,6 @@
 import { parse } from '../../markdown-parser'
 import type { MarkdownOptions } from '../../types'
+import { MarkdownParsedContent } from '../../types'
 import { useRuntimeConfig } from '#imports'
 
 const importPlugin = async (p: [string, any]) => ([
@@ -17,7 +18,7 @@ export default {
 
     const parsed = await parse(content, config)
 
-    return {
+    return <MarkdownParsedContent> {
       ...parsed.meta,
       body: parsed.body,
       _type: 'markdown',

src/runtime/types.d.ts

@@ -111,6 +111,28 @@ export interface Toc {
   links: TocLink[]
 }
 
+export interface MarkdownParsedContent extends ParsedContent {
+  _type: 'markdown',
+  /**
+   * Content is empty
+   */
+  _empty: boolean
+  /**
+   * Content description
+   */
+  description: string
+  /**
+   * Content excerpt, generated from content
+   */
+  excerpt?: MarkdownRoot
+  /**
+   * Parsed Markdown body with included table of contents.
+   */
+  body: MarkdownRoot & {
+    toc?: Toc
+  }
+}
+
 export interface ContentTransformer {
   name: string
   extensions: string[]