diff --git a/one/docs/nav.json b/one/docs/nav.json index 7c5c75f..603e7e1 100644 --- a/one/docs/nav.json +++ b/one/docs/nav.json @@ -9,6 +9,10 @@ "title": "升级日志", "slug": "changelog" }, + { + "title": "TypeScript 支持", + "slug": "typescript" + }, { "title": "起步", "slug": "getting-started", diff --git a/one/docs/typescript.md b/one/docs/typescript.md new file mode 100644 index 0000000..34093fb --- /dev/null +++ b/one/docs/typescript.md @@ -0,0 +1,68 @@ +# TypeScript 支持 + +VEUI 提供了组件 API 的 TS 声明,需要配合 `Volar` 获得最佳的开发体验。 + +:::tip +VEUI 从 2.5.2 版本开始提供组件的 TS 声明。 +::: + +如果您使用 npm < 7 或其他不会自动安装 peerDependencies 的包管理器,需要手动安装: + +```sh +npm i -D @vue/runtime-dom +``` + +### 配置 Volar 扩展 + +请参考 `Volar` 文档中的 [`Setup for Vue2`](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar#:~:text=Usage-,Setup%20for%20Vue%202,-Define%20Global%20Components)。 + +### 本地配置 + +在 `tsconfig.json` 中添加如下配置来支持 `Vue 2` 的模板语法。 + +```json +{ + "vueCompilerOptions": { + "experimentalCompatMode": 2, + "experimentalTemplateCompilerOptions": { + "compatConfig": { "MODE": 2 } + } + } +} +``` + +:::tip +如果无法查看类型声明,可以尝试重启 `Volar`: 按下 + + P 后选择 `Volar: Restart Vue server`。 +::: + +### 使用示例 + +```vue + + + +``` + +:::tip +如果您没有手动引入并注册组件,而是使用了类似 `unplugin-vue-components` 的自动注册方案,那么请引入文件 `veui/types/global.d.ts` 或者在 `tsconfig.json` 中引入该文件: + +```json +{ + "include": [ + "src/**/*", + "node_modules/veui/types/global.d.ts" + ] +} +``` +:::