基于@uni-helper/uni-app-types实现用于 uniapp 的原生组件类型
npm i mxp-uni-types
// 或
pnpm i mxp-uni-types
// 或
yarn add mxp-uni-types
配置 tsconfig.json
,确保 compilerOptions.types
中含有 @dcloudio/types
和 mxp-uni-types
{
"compilerOptions": {
"types": ["@dcloudio/types", "mxp-uni-types"]
},
"include": ["src/**/*.vue"]
}
推荐使用 mxp-uni-types
导出的类型为变量标注类型。
<script setup lang="ts">
import { ref } from 'vue';
import type { ScrollViewOnScroll } from 'mxp-uni-types';
const onScroll: ScrollViewOnScroll = (event) => {
...
};
</script>
<template>
<scroll-view @scroll="onScroll"></scroll-view>
</template>
也可以直接使用命名空间来为变量标注类型。
<script setup lang="ts">
import { ref } from 'vue';
const onScroll: GUni.ScrollViewOnScroll = (event) => {
...
};
</script>
<template>
<scroll-view @scroll="onScroll"></scroll-view>
</template>
如果你需要传入事件之外的参数,可以参考以下例子。参数顺序参考了 Vue 文档的示例(见 在内联事件处理器中访问事件参数)。
<script setup lang="ts">
import { ref } from 'vue';
import type { ScrollViewOnScrollEvent } from 'mxp-uni-types';
const onScroll = (text: string, event: ScrollViewOnScrollEvent) => {
...
};
</script>
<template>
<scroll-view @scroll="onScroll('ScrollViewA', $event)"></scroll-view>
<scroll-view @scroll="onScroll('ScrollViewB', $event)"></scroll-view>
</template>