在 上查看 uni-ui-types — 23
@uni-helper/uni-ui-types
-
@uni-helper/uni-app-types 提供
uni-app
组件类型 -
@uni-helper/uni-cloud-types 提供
uni-cloud
组件类型 -
@uni-helper/uni-ui-types (当前仓库)提供
uni-ui
组件类型
基于 这个 PR,Vue Language Features (Volar) 已经支持。
安装之后,建议启用 接管模式 Takeover Mode。如果不想启用接管模式,可以安装 TypeScript Vue Plugin (Volar)。启用或安装后需要重启 VSCode。
维护直到官方类型推出。
类型和文档的冲突之处,请以文档为准。
类型源代码在 uni-helper/uni-ui-types。欢迎提交 ISSUE 和 PR 改进类型。
使用
配置
-
安装依赖
npm i -D @uni-helper/uni-ui-types
yarn v2/v3
请参考 文档 设置
nodeLinker
为node_modules
。pnpm
请参考 文档 设置
shamefully-hoist
为true
。 -
配置
tsconfig.json
,确保compilerOptions.types
中含有@dcloudio/types
和@uni-helper/uni-ui-types
且include
包含了对应的vue
文件1.7.12 <=
Vue Language Features (Volar)
&vue-tsc
{ "compilerOptions": { "types": ["@dcloudio/types", "@uni-helper/uni-ui-types"] }, "vueCompilerOptions": { "nativeTags": ["block", "component", "template", "slot"] }, "include": ["src/**/*.vue"] }
1.5.1 <=
Vue Language Features (Volar)
&vue-tsc
{ "compilerOptions": { "types": ["@dcloudio/types", "@uni-helper/uni-ui-types"] }, "include": ["src/**/*.vue"] }
1.0.10 <=
Vue Language Features (Volar)
&vue-tsc
< 1.5.1{ "compilerOptions": { "types": ["@dcloudio/types", "@uni-helper/uni-ui-types"] }, "vueCompilerOptions": { "nativeTags": ["block", "component", "template", "slot"] }, "include": ["src/**/*.vue"] }
0.34.16 <=
Vue Language Features (Volar)
&vue-tsc
< 1.0.10{ "compilerOptions": { "types": ["@dcloudio/types", "@uni-helper/uni-ui-types"] }, "vueCompilerOptions": { "experimentalRuntimeMode": "runtime-uni-app" }, "include": ["src/**/*.vue"] }
-
重启编辑器 / IDE
标注类型
推荐使用 @uni-helper/uni-ui-types
导出的类型为变量标注类型。
<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>
也可以直接使用命名空间来为变量标注类型。
<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>
请查看 types 了解所有类型。
致谢
最初在 uni-base-components-types 得到了灵感。
基于 这个 PR 完成。