@uni-helper/uni-ui-types
v0.5.14
Published
uni-ui 组件类型
Downloads
2,101
Readme
@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 - Official(即 Volar) 已经支持。
安装之后,请参考 这里 配置你的 VS Code。启用或安装后需要重启 VS Code。
维护直到官方类型推出。
类型和文档的冲突之处,请以文档为准。
类型源代码在 uni-helper/uni-ui-types。欢迎提交 ISSUE 和 PR 改进类型。
使用
配置
安装依赖
npm i -D @uni-helper/uni-app-types @uni-helper/uni-ui-types
配置
tsconfig.json
,确保compilerOptions.types
中含有@dcloudio/types
、@uni-helper/uni-app-types
和@uni-helper/uni-ui-types
,且include
包含了对应的vue
文件{ "compilerOptions": { "types": [ "@dcloudio/types", "@uni-helper/uni-app-types", "@uni-helper/uni-ui-types" ] }, "vueCompilerOptions": { "plugins": ["@uni-helper/uni-app-types/volar-plugin"] }, "include": ["src/**/*.vue"] }
{ "compilerOptions": { "types": [ "@dcloudio/types", "@uni-helper/uni-app-types", "@uni-helper/uni-ui-types" ] }, "vueCompilerOptions": { "nativeTags": ["block", "component", "template", "slot"] }, "include": ["src/**/*.vue"] }
{ "compilerOptions": { "types": [ "@dcloudio/types", "@uni-helper/uni-app-types", "@uni-helper/uni-ui-types" ] }, "include": ["src/**/*.vue"] }
{ "compilerOptions": { "types": [ "@dcloudio/types", "@uni-helper/uni-app-types", "@uni-helper/uni-ui-types" ] }, "vueCompilerOptions": { "nativeTags": ["block", "component", "template", "slot"] }, "include": ["src/**/*.vue"] }
{ "compilerOptions": { "types": [ "@dcloudio/types", "@uni-helper/uni-app-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 完成。