评论

微信小程序ts开发版本的Behavior类型导入问题解决方案

Behavior类型导入问题解决方案

问题:ts版本使用Behavior后 页面、组件类型推导不出来

解决方案:根据Behavior的构造函数类型,创建使用函数,返回创建后的实例以及传入参数类型

/**
 * 使用Behavior,导出Behavior以及使用的类型数据
 * @param op Behavior相同传入参数
 * @returns { behavior: 使用的Behavior, tp: 定义传入的类型数据 }
 */
export function useBehavior<
    TData extends WechatMiniprogram.Behavior.DataOption,
    TProperty extends WechatMiniprogram.Behavior.PropertyOption,
    TMethod extends WechatMiniprogram.Behavior.MethodOption,
    TBehavior extends WechatMiniprogram.Behavior.BehaviorOption,
    TCustomInstanceProperty extends WechatMiniprogram.IAnyObject = Record<string, never>
>(op: WechatMiniprogram.Behavior.Options<TData, TProperty, TMethod, TBehavior, TCustomInstanceProperty> ) {
    const behavior = Behavior(op)
    return {
        behavior,
        tp: {} as typeof op
    }
}


实战:

单独提取的模块:
import { ScreenInfoCfg, ToastCls } from "../assets/configs/ScreenInfoCfg"
import Toast from "../miniprogram_npm/@vant/weapp/toast/toast"
import { useBehavior } from "./UseBehavior"
Toast.setDefaultOptions({
    duration: ScreenInfoCfg.sduration
})
const ttMixin = useBehavior({
    behaviors: [],
    data: {
        toast_cls: "",
    },
    methods: {
        toast(text: string, tc: string = ToastCls.success) {
            this.setData({ toast_cls: tc })
            if (tc == ToastCls.success) Toast.success(text)
            else if (tc == ToastCls.fail) Toast.fail(text)
            else Toast(text)
        }
    }
})
const ToastBehavior = ttMixin.behavior
const ToastTp = ttMixin.tp
export {
    ToastBehavior,
    ToastTp
}


使用的地方:
import { ToastBehavior, ToastTp } from "../../mixins/toast"

Page({
    behaviors: [ToastBehavior],
    ...{} as typeof ToastTp.methods,
    data: {
        ...{} as typeof ToastTp.data
    },
最后一次编辑于  2025-11-15  
点赞 1
收藏
评论
登录 后发表内容