问题: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
},
