From 89384f46f12db2a7564050a81e25f761350965d9 Mon Sep 17 00:00:00 2001
From: rk_zhang <40221744+qmhc@users.noreply.github.com>
Date: Tue, 19 Oct 2021 09:05:18 +0800
Subject: [PATCH] docs: update simple example for use

---
 README.md                      | 33 +++++++++++++++++++++++++++++++++
 README.zh-CN.md                | 32 ++++++++++++++++++++++++++++++++
 example/components/JsTest.vue  |  5 ++---
 example/components/JsxTest.jsx |  5 ++---
 4 files changed, 69 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 160c8b2..81b8ed8 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,8 @@ yarn add vite-plugin-dts -D
 
 ## Usage
 
+In `vite.config.ts`:
+
 ```ts
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
@@ -30,6 +32,37 @@ export default defineConfig({
 })
 ```
 
+In your component:
+
+```vue
+<template>
+  <div></div>
+</template>
+
+<script lang="ts">
+// using defineComponent for inferring types
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Component'
+})
+</script>
+```
+
+```vue
+<script setup lang="ts">
+// Need to access the defineProps returned value to
+// infer types although you never use the props directly
+const props = defineProps<{
+  color: 'blue' | 'red'
+}>()
+</script>
+
+<template>
+  <div>{{ color }}</div>
+</template>
+```
+
 ## Options
 
 ```ts
diff --git a/README.zh-CN.md b/README.zh-CN.md
index f5c6de1..6360f08 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -12,6 +12,8 @@ yarn add vite-plugin-dts -D
 
 ## 使用
 
+在 `vite.config.ts`:
+
 ```ts
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
@@ -30,6 +32,36 @@ export default defineConfig({
 })
 ```
 
+在你的组件中:
+
+```vue
+<template>
+  <div></div>
+</template>
+
+<script lang="ts">
+// 使用 defineComponent 来进行类型推断
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Component'
+})
+</script>
+```
+
+```vue
+<script setup lang="ts">
+// 尽管没有直接使用 props，你仍需要接收 defineProps 的返回值
+const props = defineProps<{
+  color: 'blue' | 'red'
+}>()
+</script>
+
+<template>
+  <div>{{ color }}</div>
+</template>
+```
+
 ## 选项
 
 ```ts
diff --git a/example/components/JsTest.vue b/example/components/JsTest.vue
index 16be4f7..6021ae5 100644
--- a/example/components/JsTest.vue
+++ b/example/components/JsTest.vue
@@ -5,9 +5,8 @@
 </template>
 
 <script>
-// 尽管在使用 js 语法
-// 如果仍想要获得正确的类型推导
-// 依然需要使用 defineComponent 定义组件
+// If you still want to ge the currect types inference with using  
+// js syntax, you need using defineComponent to define component
 import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
diff --git a/example/components/JsxTest.jsx b/example/components/JsxTest.jsx
index 5f2f4c7..f80a48c 100644
--- a/example/components/JsxTest.jsx
+++ b/example/components/JsxTest.jsx
@@ -1,6 +1,5 @@
-// 尽管在使用 jsx 语法
-// 如果仍想要获得正确的类型推导
-// 依然需要使用 defineComponent 定义组件
+// If you still want to ge the currect types inference with using  
+// js syntax, you need using defineComponent to define component
 import { defineComponent } from 'vue'
 
 export default defineComponent({