TypeScript 使用（中文）

本库以 TypeScript 为首选语言，导出公共 API 类型。使用 import type 来获取节点定义以用于高级用法。

import type { BaseNode } from 'markstream-vue'
import { getMarkdown } from 'markstream-vue'

const md = getMarkdown()
const nodes: BaseNode[] = []

自定义组件映射类型也已经对外导出：

import type { CustomComponents } from 'markstream-vue'

const components: CustomComponents = {
  thinking: {} as any,
  code_block: {} as any,
}

强类型自定义组件

你可以强类型化自定义组件以接收节点特定 props，例如：

<script setup lang="ts">
import type { CodeBlockNode } from 'markstream-vue'

const props = defineProps<{ node: CodeBlockNode }>()
</script>

<template>
  <pre class="custom-code">
    <code :data-lang="props.node.language">{{ props.node.code }}</code>
  </pre>
</template>

然后注册该组件：

import type { Component } from 'vue'
import { setCustomComponents } from 'markstream-vue'

declare const CustomCodeBlock: Component

setCustomComponents('docs', {
  code_block: CustomCodeBlock,
})

此种方式支持类型检查与智能提示。

import type { CodeBlockNodeProps } from 'markstream-vue'

const node: CodeBlockNodeProps['node'] = { type: 'code_block', language: 'ts', code: 'console.log(1)', raw: 'console.log(1)' }