英文:
Is it possible to render TS types or values of variables inside markdown files using static site generators like VitePress?
问题
Sure, here is the translated text:
我想使用 Vitepress（或类似的工具）创建文档。此应用程序使用一个包，其中包含类型和Zod模式。根库的 index.ts 可能如下：
import { z } from 'zod';
const userSchema = z
.object({
username: z.string().min(1),
})
.strict();
type User = z.infer<typeof userSchema>;
export { userSchema, User }
有没有一种方法可以在 markdown 文件中渲染模式或类型？
也许可以借助 Vue 文件（VitePress）
我只想描述模式或类型，而不想从中复制粘贴所有字段，因为那样我必须确保一切都保持同步。
英文:
I want to create a documentation using Vitepress ( or similiar ). This app uses a package which contains types and Zod schemas. The root library index.ts could be
import { z } from 'zod';
const userSchema = z
.object({
username: z.string().min(1),
})
.strict();
type User = z.infer<typeof userSchema>;
export { userSchema, type User }
Is there a way to either render the schema or the type inside the markdown file?
Maybe with the help of Vue files ( VitePress )
I just want to describe the schema or type but don't want to copy paste all the fields from it because then I have to take care that everything is in sync.
答案1
得分: 1
- 使用 https://www.npmjs.com/package/zod-to-ts 将您的模式转换为运行时 TypeScript 语言字符串。
- 使用
ts-vue Code Blocks来呈现它。
<script setup lang="ts">
import { printNode, zodToTs } from 'zod-to-ts'
import { UserSchema } from './schemas'
const identifier = 'User'
const { node } = zodToTs(UserSchema, identifier)
const nodeString = printNode(node)
</script>
```ts-vue
// {{ identifier }} 模式
{{ nodeString }}
英文:
- Use https://www.npmjs.com/package/zod-to-ts to convert your schema to
a runtime typescript-lang string - Use
ts-vue Code Blocksro render it
<script setup lang="ts">
import { printNode, zodToTs } from 'zod-to-ts'
import { UserSchema } from './schemas'
const identifier = 'User'
const { node } = zodToTs(UserSchema, identifier)
const nodeString = printNode(node)
</script>
```ts-vue
// {{ identifier }} Schema
{{ nodeString }}
```
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论