uni-helper
@uni-helper/uni-ui-types
- @uni-helper/uni-app-types 为 Vue v3 uni-app 组件提供 TypeScript 类型。
- @uni-helper/uni-cloud-types 为 Vue v3 uni-cloud 组件提供 TypeScript 类型。
- 【当前】@uni-helper/uni-ui-types 为 Vue v3 uni-ui 组件提供 TypeScript 类型。
- @uni-helper/uni-types 为 Vue v3 uni-app、uni-cloud 和 uni-ui 组件提供 TypeScript 类型支持，即以上三者的集合。
起步
配置编辑器/IDE
请参考 搭配 TypeScript 使用 Vue 将 Volar（Vue 语言服务工具）添加到你的编辑器或 IDE，配置完毕后请重启你的编辑器或 IDE 以确保服务启动。
[!TIP] 截至 2024-08-07，经实测确定，版本组合 Volar v2.0.28、TypeScript v5.5.4、Vue v3.4.38 可正常实现类型提示。
安装依赖
npm i -D @uni-helper/uni-ui-types此外你需要确保项目已经安装 Vue 和 TypeScript。
[!TIP] 为了避免幽灵依赖（又称幻影依赖，详见 这篇文章），请检查你的包管理器。
如果你正在使用 yarn v2 或以上版本，请参考 文档 设置
nodeLinker为node_modules。如果你正在使用 pnpm，请参考 文档 设置
shamefully-hoist为true。
配置 TypeScript
更新 tsconfig.json，确保：
compilerOptions.types包含@uni-helper/uni-ui-typesinclude包含vue相关文件
以下是一个 tsconfig.json 示例，你可以直接复制它并粘贴到项目内。请注意，你可能需要稍微调整以匹配你的开发需求，相关依赖需要自行安装。
[!WARNING] 截至 2024-07-28，uni-app 官方提供的 Vue v3 + Vite + TypeScript 模板版本相对落后，如果你正在使用它，请手动升级 TypeScript 和 Vue 版本，playground/package.json 可供参考。
你也可以在这里获取 社区模板 以起步。
{
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"module": "ESNext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"jsx": "preserve",
"jsxImportSource": "vue",
"noImplicitThis": true,
"strict": true,
"verbatimModuleSyntax": true,
"target": "ESNext",
"useDefineForClassFields": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"skipLibCheck": true,
"types": [
// uni-app + Vue 3 使用 Vite 构建，需要安装 vite
"vite/client",
// uni API 相关的 TypeScript 类型
"@dcloudio/types",
// my API 相关的 TypeScript 类型
"@mini-types/alipay",
// wx API 相关的 TypeScript 类型，需要手动安装依赖
"miniprogram-api-typings",
// 为 uni-ui 组件提供 TypeScript 类型
"@uni-helper/uni-ui-types"
]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "*.d.ts"]
}再次重启你的编辑器或 IDE 以确保服务启动并正确加载配置。如果一切顺利，你应该可以看到类似的 TypeScript 类型提示。
使用
Template
自动为 Template 内对应组件附加 TypeScript 类型提示。
Script
推荐使用 @uni-helper/uni-ui-types 导出的 TypeScript 类型为变量标注类型。
<script setup lang="ts">
import { ref } from 'vue';
import type { UniBadgeType, UniBadgeOnClick } from '@uni-helper/uni-ui-types';
const type = ref<UniBadgeType>('default');
const onClick: UniBadgeOnClick = (event) => {
// ...
};
</script>
<template>
<uni-badge :type="type" @click="onClick"></uni-badge>
</template>也可以直接使用命名空间来为变量标注类型（不推荐，详见 typescript-eslint - no-namespace)。
<script setup lang="ts">
import { ref } from 'vue';
const type = ref<UniHelper.UniBadgeType>('default');
const onClick: UniHelper.UniBadgeOnClick = (event) => {
// ...
};
</script>
<template>
<uni-badge :type="type" @click="onClick"></uni-badge>
</template>FAQ
Vue 2 支持情况
如果你正在使用 Vue 2、需要组件 TypeScript 类型支持，请使用 Volar v2.0.21、@uni-helper/uni-ui-types v0.5 和 TypeScript v5.4.5，这是最后已知可用的版本组合。
如果你正在使用 Vue 2、无需组件 TypeScript 类型支持，请使用 Vetur 和 @dcloudio/uni-helper-json。
[!WARNING] Volar 和 Vetur 不可共存，请只启用其中一个。
类型不正确
该项目强依赖 Volar、TypeScript 和 Vue 内部类型和处理，更改内部类型和处理不会对使用者造成破坏性更新，但可能会对开发者造成破坏性更新，对因此更新三者任一依赖后，可能无法正常显示本身是 HTML 自带但被占用的元素的 TypeScript 类型（如 SVG 相关元素 view、image、text、输入框元素 input 等），我们强烈建议锁定依赖版本以避免类似问题。如果你遇到了类似的问题，请先回退并锁定版本，并在 QQ 群内反馈、微信群内反馈、提交 ISSUE 或 PR，我们将尽快处理，非常感谢你的帮助！🙏
类型与文档冲突或
类型与官方文档的冲突之处，请以官方文档为准，并在 QQ 群内反馈、微信群内反馈、提交 ISSUE 或 PR，我们将尽快处理，非常感谢你的帮助！🙏
致谢
最初在 uni-base-components-types 得到了灵感。
基于 这个 PR 完成。
赞助
如果这个包对你有所帮助，请考虑 赞助 支持。
