Skip to content

Commit 2539003

Browse files
committed
fix: update ts docs and add en version
1 parent 39e51f7 commit 2539003

File tree

2 files changed

+87
-15
lines changed

2 files changed

+87
-15
lines changed

one/docs/en-US/typescript.md

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# TypeScript Support
2+
3+
:::tip
4+
Type declarations are supported starting from version 2.5.2.
5+
:::
6+
7+
VEUI provides TS declarations for component APIs, which require Volar for the best development experience.
8+
9+
### Configure Volar extension
10+
11+
Please refer to the Volar documentation on [`Setup for Vue2`](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar#:~:text=Usage-,Setup%20for%20Vue%202,-Define%20Global%20Components).
12+
13+
For Vue versions < 2.7, `@vue/runtime-dom` needs to be installed:
14+
15+
```sh
16+
npm i -D @vue/runtime-dom
17+
```
18+
19+
### Local configuration
20+
21+
Add the following configuration to `tsconfig.json` to support Vue 2's template syntax.
22+
23+
```json
24+
// tsconfig.json
25+
{
26+
"compilerOptions": {
27+
// ...
28+
},
29+
"vueCompilerOptions": {
30+
"target": 2.7,
31+
// "target": 2, // for Vue versions < 2.7
32+
}
33+
}
34+
```
35+
36+
:::tip
37+
If types are not working properly, try restarting Volar: Press <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>P</kbd> and select “Volar: Restart Vue server”.
38+
:::
39+
40+
### Usage example
41+
42+
```vue
43+
<template>
44+
<veui-button>OK</veui-button>
45+
</template>
46+
47+
<script lang="ts">
48+
import { defineComponent } from 'vue' // < 2.7 versions require `@vue/composition-api`
49+
import { Button } from 'veui'
50+
51+
export default defineComponent({
52+
components: {
53+
'veui-button': Button
54+
}
55+
})
56+
</script>
57+
```
58+
59+
:::tip
60+
If you have not manually imported and registered components, but instead use an [automatic registration solution](poe://www.poe.com/_api/key_phrase?phrase=automatic%20registration%20solution&prompt=Tell%20me%20more%20about%20automatic%20registration%20solution.) like `unplugin-vue-components`, please import the file `veui/types/global.d.ts` or include it in the `tsconfig.json` file:
61+
62+
```json
63+
{
64+
"include": [
65+
"src/**/*",
66+
"node_modules/veui/types/global.d.ts"
67+
]
68+
}
69+
```
70+
:::

one/docs/typescript.md

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,40 @@
11
# TypeScript 支持
22

3-
VEUI 提供了组件 API 的 TS 声明,需要配合 `Volar` 获得最佳的开发体验。
4-
53
:::tip
6-
VEUI 从 2.5.2 版本开始提供组件的 TS 声明
4+
类型声明从 2.5.2 版本开始支持
75
:::
86

9-
如果您使用 npm < 7 或其他不会自动安装 peerDependencies 的包管理器,需要手动安装:
7+
VEUI 提供了组件 API 的 TS 声明,需要配合 Volar 获得最佳的开发体验。
8+
9+
### 配置 Volar 扩展
10+
11+
请参考 Volar 文档中的 [`Setup for Vue2`](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar#:~:text=Usage-,Setup%20for%20Vue%202,-Define%20Global%20Components)
12+
13+
对于 Vue < 2.7 的版本,需要安装 `@vue/runtime-dom`
1014

1115
```sh
1216
npm i -D @vue/runtime-dom
1317
```
1418

15-
### 配置 Volar 扩展
16-
17-
请参考 `Volar` 文档中的 [`Setup for Vue2`](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar#:~:text=Usage-,Setup%20for%20Vue%202,-Define%20Global%20Components)
18-
1919
### 本地配置
2020

21-
`tsconfig.json` 中添加如下配置来支持 `Vue 2` 的模板语法。
21+
`tsconfig.json` 中添加如下配置来支持 Vue 2 的模板语法。
2222

2323
```json
24+
// tsconfig.json
2425
{
26+
"compilerOptions": {
27+
// ...
28+
},
2529
"vueCompilerOptions": {
26-
"experimentalCompatMode": 2,
27-
"experimentalTemplateCompilerOptions": {
28-
"compatConfig": { "MODE": 2 }
29-
}
30+
"target": 2.7,
31+
// "target": 2, // 对于 Vue < 2.7 的版本
3032
}
3133
}
3234
```
3335

3436
:::tip
35-
如果无法查看类型声明,可以尝试重启 `Volar`: 按下 <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>P</kbd> 后选择 `Volar: Restart Vue server`
37+
如果类型无法正常工作,可以尝试重启 Volar: 按下 <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>P</kbd> 后选择Volar: Restart Vue server
3638
:::
3739

3840
### 使用示例
@@ -43,7 +45,7 @@ npm i -D @vue/runtime-dom
4345
</template>
4446
4547
<script lang="ts">
46-
import { defineComponent } from '@vue/composition-api'
48+
import { defineComponent } from 'vue' // < 2.7 的版本需要用 `@vue/composition-api`
4749
import { Button } from 'veui'
4850
4951
export default defineComponent({

0 commit comments

Comments
 (0)