vue3 + uniapp + HBuilder 项目搭建 - 扩展uniapp内置Api

安装uni-api的types

npm i @dcloudio/types -D

配置tsconfig识别namespace UniApp

// tsconfig.json
{
   
	"compilerOptions": {
   
		"types": ["node", "@dcloudio/types"],
    	"typeRoots": ["./node_modules/@types/","./node_modules/@dcloudio/types/", "./types"],
	}
}

创建配置文件 uni.config.ts 和声明文件 uni.config.d.ts

// types/config/uni.config.d.ts
declare namespace UniApp {
   
  /**
   * @desc: 权限类型
   */
  type AuthorizeScopeTypes =
    | 'scope.userInfo' //用户信息 uni.getUserInfo
    | 'scope.userLocation' //地理位置 uni.getLocation, uni.chooseLocation
    | 'scope.userLocationBackground' //后台定位 wx.userLocationBackground
    | 'scope.address' //通信地址 uni.chooseAddress
    | 'scope.record' //录音功能 uni.getRecorderManager
    | 'scope.writePhotosAlbum' //保存到相册 uni.saveImageToPhotosAlbum, uni.saveVideoToPhotosAlbum
    | 'scope.camera' //摄像头 <camera /> 组件，头条下的扫码、拍照、选择相册
    | 'scope.invoice' //获取发票 wx.chooseInvoice
    | 'scope.invoiceTitle' //发票抬头 uni.chooseInvoiceTitle
    | 'scope.werun' //微信运动步数 wx.getWeRunData

  /**
   * @name: sww
   * @date: 2021-12-10
   * @desc: 路由类型
   */
  type LinkToTypes = 'navigateTo' | 'redirectTo' | 'switchTab' | 'reLaunch'

  /**
   * @name: sww
   * @date: 2021-12-10
   * @desc: 路由跳转参数
   */
  type LinkToOptions = {
   
    /**
     * 窗口显示的动画类型
     * - auto: 自动选择动画效果
     * - none: 无动画效果
     * - slide-in-right: 从右侧横向滑动效果
     * - slide-in-left: 左侧横向滑动效果
     * - slide-in-top: 从上侧竖向滑动效果
     * - slide-in-bottom: 从下侧竖向滑动效果
     * - fade-in: 从透明到不透明逐渐显示效果
     * - zoom-out: 从小到大逐渐放大显示效果
     * - zoom-fade-out: 从小到大逐渐放大并且从透明到不透明逐渐显示效果
     * - pop-in: 从右侧平移入栈动画效果
     */
    animationType?:
      | 'auto'
      | 'none'
      | 'slide-in-right'
      | 'slide-in-left'
      | 'slide-in-top'
      | 'slide-in-bottom'
      | 'fade-in'
      | 'zoom-out'
      | 'zoom-fade-out'
      | 'pop-in'
    /**
     * 窗口显示动画的持续时间，单位为 ms
     */
    animationDuration?: number
    /**
     * 页面间通信接口，用于监听被打开页面发送到当前页面的数据
     */
    events?: any
    /**
     * 跳转类型
     */
    type?: LinkToTypes
  }

  /**
   * @name: sww
   * @date: 2021-12-10
   * @desc: EventChannel类型定义
   */
  interface EventChannel {
   
    onFunction(...args: any[]): void
    emit(eventName: string, ...args: any[])
    off(eventName: string, fn: Function)
    on(eventName: string, fn: UniApp.EventChannel.onFunction)
    once(eventName: string, fn: UniApp.EventChannel.onFunction)
  }

  interface ShowToastTypedFn {
   
    success(title: string, options?: UniApp.ShowToastOptions): void
    error(title: string, options?: UniApp.ShowToastOptions): void
    loading(title: string, options?: UniApp.ShowToastOptions): void
  }

  interface ChooseImageOptions {
   
    size?: number //单位 M
  }

  interface ChooseImageSuccessCallbackResult {
   
    /**
     * 图片的本地文件路径列表
     */
    tempFilePaths: string[]
    /**
     * 图片的本地文件列表，每一项是一个 File 对象
     */
    tempFiles: ChooseImageSuccessCallbackResultFile[] | File[]
  }

  interface UniSelf extends UniApp.Uni {
   
    // 重新编辑返回值类型(uniapp自带的有对api promise化，但是types返回的都是void，这里重新定义类型声明)
    /**
     * 从本地相册选择图片或使用相机拍照
     *
     * 文档: [http://uniapp.dcloud.io/api/media/image?id=chooseimage](http://uniapp.dcloud.io/api/media/image?id=chooseimage)
     */
    chooseImage(
      options: UniApp.ChooseImageOptions
    ): Promise<UniApp.ChooseImageSuccessCallbackResult>

    // 自定义模块
    p: {
   
      /**
       * @name: sww
       * @date: 2021-12-09
       * @desc: loading
       */
      showLoading(options?: string | UniApp.ShowLoadingOptions): void
      /**
       * 提前向用户发起授权请求
       *
       * 文档: [http://uniapp.dcloud.io/api/other/authorize?id=authorize](http://uniapp.dcloud.io/api/other/authorize?id=authorize)
       */
      authorize(scope: AuthorizeScopeTypes): Promise<string>
      /**
       * 获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址，需要用户授权 scope.address
       *
       * 文档: [http://uniapp.dcloud.io/api/other/choose-address?id=chooseaddress](http://uniapp.dcloud.io/api/other/choose-address?id=chooseaddress)
       */
      chooseAddress(): Promise