使用dva和typescript时dispatch函数的跳转方法

2023-08-21  本文已影响0人  平常心

主要用于IDE方法间跳转.
假设有以下数据结构:

export type ModelType = {
  namespace: string;
  state: StateType;
  effects: {
    queryProject: Effect;
  };
  reducers: {
    updateToolContentHeight: Reducer<StateType>;
}

const Model: ModelType = {
  namespace: 'Studio',
  effects: {
    queryProject: Effect;
  };
  reducers: {
    updateToolContentHeight: Reducer<StateType>{}
}

export const [ALERT_MODEL, ALERT_MODEL_ASYNC] = createModelTypes(AlertModel);

跳转方法定义

interface BaseModeType {['reducers']: {}, ['effects']: {}, ['namespace']: string}
type MemberType<T extends BaseModeType, U> = U extends 'effects' ? T['effects'] : T['reducers']

function getModelTypes<T extends BaseModeType>(target: T, type: 'effects' | 'reducers'):
    { [K in keyof MemberType<T, typeof type>]: string } {
  const reducers = Object.keys(target[type]).map((obj: string) => [obj, `${target.namespace}/${obj}`]);
  // @ts-ignore
  return Object.fromEntries(new Map<keyof typeof target[type], string>(reducers));
}

export const createModelTypes = <T extends BaseModeType>(
  target: T
): [{ [K in keyof T['reducers']]: string }, { [K in keyof T['effects']]: string }] => {
  return [ getModelTypes(target, 'reducers'), getModelTypes(target, 'effects') ];
};

使用

   dispatch({
      type: ALERT_MODEL.saveTabs,
      payload: { ...props.tabs }
    });

跳转方法部分类型处理应该可以进一步优化.

上一篇下一篇

猜你喜欢

热点阅读