使用 TypeScript 开发时，如何与 mobx-miniprogram-bindings 共存

[wxin2022]

使用 ts 进行开发时，computed 推荐使用 ComponentWithComputed 替代 微信的 Component 方法构造页面，然而 mobx-miniprogram 推荐 使用 ComponentWithStore 进行构造页面，那么请问如何才能使两者共存？

[TtTRz]

对这块的 TS 支持确实有所欠缺，后续会完善下。

[ginlink]

目前没有找到好方法，我选择放弃store的类型声明，因为一般情况下，computed用得会更多

[copofe]

目前没有找到好方法，我选择放弃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);
}

[Tommykkkk]

你好,使用 ts 进行开发时，computed 推荐使用 ComponentWithComputed 替代 微信的 Component 方法构造页面 ,ts会发生报错问题 比如使用本身this.properties.A 的传递进来的参数ts提示 类型“{ onSelect(event: CustomEvent): void; onAdd(event: CustomEvent): void; beforExportData(arr: Comp[], CompCode: string): void; }”上不存在属性“properties”。这块内容应该如何去调整

[LastLeaf]

你好,使用 ts 进行开发时，computed 推荐使用 ComponentWithComputed 替代 微信的 Component 方法构造页面 ,ts会发生报错问题 比如使用本身this.properties.A 的传递进来的参数ts提示 类型“{ onSelect(event: CustomEvent): void; onAdd(event: CustomEvent): void; beforExportData(arr: Comp[], CompCode: string): void; }”上不存在属性“properties”。这块内容应该如何去调整

请确认：

• tsconfig.json 中的 noImplicitThis 选项已经被打开；
• 实际使用的 miniprogram-api-typings 版本 >= 4.0.0 。