vue3 中 ts 写法使用cherry-markdown

在 Vue3 中使用 TypeScript 编写 CherryMarkdown 可以按照以下步骤进行：

1. 安装 CherryMarkdown

npm install cherry-markdown

2. 在 Vue 单文件组件中使用 CherryMarkdown

<template>
  <div>
    <cherry-markdown :source="markdownContent" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import CherryMarkdown from 'cherry-markdown';

export default defineComponent({
  components: { CherryMarkdown },
  data() {
    return {
      markdownContent: '# Hello, CherryMarkdown!'
    };
  }
});
</script>

在 TypeScript 中，需要使用 `defineComponent` 函数来定义 Vue 组件，并显式地指定 `CherryMarkdown` 组件。

3. 在 TypeScript 中使用 CherryMarkdown 的 Props

CherryMarkdown 提供了多个 Props 用于控制渲染行为，例如 `source` 用于指定源 Markdown 文本，`theme` 用于指定渲染主题等。在 TypeScript 中使用 Props，需要先定义 Props 的类型：

interface CherryMarkdownProps {
  source: string;
  theme?: string;
  // 其他 Props
}

然后在组件中显式地声明 Props：

import { defineComponent } from 'vue';
import CherryMarkdown from 'cherry-markdown';

interface CherryMarkdownProps {
  source: string;
  theme?: string;
  // 其他 Props
}

export default defineComponent({
  components: { CherryMarkdown },
  props: {
    source: {
      type: String,
      required: true
    },
    theme: {
      type: String,
      default: 'default'
    },
    // 其他 Props
  },
  setup(props: CherryMarkdownProps) {
    // 在 setup 函数中可以使用 props
    // ...
  }
});

这样就可以在 TypeScript 中使用 CherryMarkdown 的 Props 了。