Uni Helper

旨在增强 uni-app 系列产品的开发体验

上查看 uni-app-types 73

@uni-helper/uni-app-types

License

npm

基于 这个 PRVue - Official(即 Volar) 已经支持。

安装之后,请参考 这里 配置你的 VS Code。启用或安装后需要重启 VS Code。

维护直到官方类型推出。

类型和文档的冲突之处,请以文档为准。

类型源代码在 uni-helper/uni-app-types。欢迎提交 ISSUE 和 PR 改进类型。

使用

配置

  • 安装依赖

    npm i -D @uni-helper/uni-app-types
    yarn v2/v3

    请参考 文档 设置 nodeLinkernode_modules

    pnpm

    请参考 文档 设置 shamefully-hoisttrue


  • 配置 tsconfig.json,确保 compilerOptions.types 中含有 @dcloudio/types@uni-helper/uni-app-types,且 include 包含了对应的 vue 文件

    2.0.14 <= Vue Language Features (Volar) & vue-tsc
    {
      "compilerOptions": {
        "types": ["@dcloudio/types", "@uni-helper/uni-app-types"]
      },
      "vueCompilerOptions": {
        "plugins": ["@uni-helper/uni-app-types/volar-plugin"]
      },
      "include": ["src/**/*.vue"]
    }
    1.7.12 <= Vue Language Features (Volar) & vue-tsc < 2.0.14
    {
      "compilerOptions": {
        "types": ["@dcloudio/types", "@uni-helper/uni-app-types"]
      },
      "vueCompilerOptions": {
        "nativeTags": ["block", "component", "template", "slot"]
      },
      "include": ["src/**/*.vue"]
    }
    1.5.1 <= Vue Language Features (Volar) & vue-tsc < 1.7.12
    {
      "compilerOptions": {
        "types": ["@dcloudio/types", "@uni-helper/uni-app-types"]
      },
      "include": ["src/**/*.vue"]
    }
    1.0.10 <= Vue Language Features (Volar) & vue-tsc < 1.5.1
    {
      "compilerOptions": {
        "types": ["@dcloudio/types", "@uni-helper/uni-app-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-app-types"]
      },
      "vueCompilerOptions": {
        "experimentalRuntimeMode": "runtime-uni-app"
      },
      "include": ["src/**/*.vue"]
    }

  • 重启编辑器 / IDE

标注类型

推荐使用 @uni-helper/uni-app-types 导出的类型为变量标注类型。

<template>
  <scroll-view @scroll="onScroll"></scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { ScrollViewOnScroll } from '@uni-helper/uni-app-types';

const onScroll: ScrollViewOnScroll = (event) => {
  // ...
};
</script>

也可以直接使用命名空间来为变量标注类型。

<template>
  <scroll-view @scroll="onScroll"></scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const onScroll: UniHelper.ScrollViewOnScroll = (event) => {
  // ...
};
</script>

如果你需要传入事件之外的参数,可以参考以下例子。参数顺序参考了 Vue 文档的示例(见 在内联事件处理器中访问事件参数)。

<template>
  <scroll-view @scroll="onScroll('ScrollViewA', $event)"></scroll-view>
  <scroll-view @scroll="onScroll('ScrollViewB', $event)"></scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { ScrollViewOnScrollEvent } from '@uni-helper/uni-app-types';

const onScroll = (text: string, event: ScrollViewOnScrollEvent) => {
  // ...
};
</script>

请查看 src 了解所有类型。

致谢

最初在 uni-base-components-types 得到了灵感。

基于 这个 PR 完成。