computed
computed copied to clipboard
使用 TypeScript 开发时,如何与 mobx-miniprogram-bindings 共存
使用 ts 进行开发时,computed 推荐使用 ComponentWithComputed 替代 微信的 Component 方法构造页面,然而 mobx-miniprogram 推荐 使用 ComponentWithStore 进行构造页面,那么请问如何才能使两者共存?
对这块的 TS 支持确实有所欠缺,后续会完善下。
目前没有找到好方法,我选择放弃store的类型声明,因为一般情况下,computed用得会更多
目前没有找到好方法,我选择放弃store的类型声明,因为一般情况下,computed用得会更多
可以组合两个的类型声明,重写个
import { behavior } from 'miniprogram-computed';
import { storeBindingsBehavior, IStoreBindings } from 'mobx-miniprogram-bindings';
type ComponentWithInstance<
D extends WechatMiniprogram.Component.DataOption,
P extends WechatMiniprogram.Component.PropertyOption,
M extends WechatMiniprogram.Component.MethodOption,
C extends Record<string, (data: D & { [K in keyof P]: any }) => any>,
CP extends WechatMiniprogram.IAnyObject = Record<string, never>
> = WechatMiniprogram.Component.Instance<D, P, M, CP> & {
data: { [K in keyof C]: ReturnType<C[K]> } & { [K in keyof P]: any };
};
type WithOptions<
TData extends WechatMiniprogram.Component.DataOption,
TProperty extends WechatMiniprogram.Component.PropertyOption,
TMethod extends WechatMiniprogram.Component.MethodOption,
TWatch extends Record<string, (...args: any[]) => void>,
TComputed extends Record<
string,
(data: TData & WechatMiniprogram.Component.PropertyOptionToData<TProperty>) => any
>,
TCustomInstanceProperty extends WechatMiniprogram.IAnyObject = {},
> = (Partial<WechatMiniprogram.Component.Data<TData>> &
Partial<WechatMiniprogram.Component.Property<TProperty>> &
Partial<WechatMiniprogram.Component.Method<TMethod>> &
Partial<WechatMiniprogram.Component.OtherOption> &
Partial<WechatMiniprogram.Component.Lifetimes> & {
watch?: TWatch;
computed?: TComputed;
template?: string;
storeBindings?: IStoreBindings | Array<IStoreBindings>;
}) &
ThisType<
ComponentWithInstance<
TData,
TProperty,
TMethod,
TComputed,
TCustomInstanceProperty
>
>;
export function ComponentWith<
TData extends WechatMiniprogram.Component.DataOption,
TProperty extends WechatMiniprogram.Component.PropertyOption,
TMethod extends WechatMiniprogram.Component.MethodOption,
TWatch extends Record<string, (...args: any[]) => void>,
TComputed extends Record<
string,
(data: TData & WechatMiniprogram.Component.PropertyOptionToData<TProperty>) => any
>,
TCustomInstanceProperty extends WechatMiniprogram.IAnyObject = {},
>(options: WithOptions<
TData,
TProperty,
TMethod,
TWatch,
TComputed,
TCustomInstanceProperty>) {
if (!Array.isArray(options.behaviors)) {
options.behaviors = [];
}
options.behaviors.unshift(storeBindingsBehavior, behavior);
return Component(options);
}