打字稿重复声明合并

Question

I am currently working on making a redux-like library with TypeScript. The basic action looks like this:

interface ActionBase {
  type: string;
  payload: any;
}

I then extend the action interface for each action type. For example, for a button-click event, I would have something like:

interface ButtonClickAction extends ActionBase {
  type: 'BUTTON_CLICK';
  payload: {
    // Include some kind of metadata in here
  };
}

I then am adding some helper functions

function isInstanceOfButtonClick(action: ActionBase ): action is ButtonClickAction {
  return action.type === 'BUTTON_CLICK';
}

function buildButtonClickAction(payload): ButtonClickAction {
  return {
    type: 'BUTTON_CLICK',
    payload,
  };
}

The problem is that I am doing this for over 20 different types of action. Is there a dry-er way to do this? For every action I need:

1. The string value of the type ( "BUTTON_CLICK" )
2. The type of the payload
3. The type of the action ( ButtonClickAction )
4. A builder funtion ( buildButtonClickAction )
5. An isInstance function ( isInstanceOfButtonClick )

I can achieve all the concrete items (1, 4, 5) using a class or function, but I don't have a dry way to do 2 and 3. Right now, I have something like this for every action:

const KEY = 'BUTTON_CLICK';
namespace ButtonClick {
  export type Payload = {...}
  export interface Action extends ActionBase {
    type: typeof KEY;
    payload: Payload;
  }
}

let ButtonClick = makeActionValues<typeof KEY, ButtonClick.Payload, ButtonClick.Action>(KEY)

export default ButtonClick;

Is there a nicer way to do this?

Answer 1

How about something like a function which creates a dictionary of Action factories, where each factory has its own isInstance() and buildAction() methods for the appropriate type of Action ? Like this:

interface ActionFactory<T extends string, P> {
  isInstance(action: Action): action is Action<T, P>;
  buildAction(payload: P): Action<T, P>;
}
interface Action<T extends string=string, P=any> {
  type: T,
  payload: P,
}

function getActionFactories<M extends object>(mappings: M): {[T in keyof M]: ActionFactory<T, M[T]>} {
  const ret: any = {};
  Object.keys(mappings).forEach((k: keyof M) => {
    type T = keyof M;
    type P = M[T];
    ret[k] = class Act {
      static isInstance(action: Action): action is Action<T, P> {
        return action.type === k;
      }
      static buildAction(payload: P): Action<T, P> {
        return new Act(payload);        
      }
      type: T = k;
      private constructor(public payload: P) { }
    }
  });
  return ret;
}

You use it by creating a mapping of action keys to payload types:

const _: any = void 0;
const ActionPayloads = {
  ButtonClick: _ as { whatever: string },
  SomeOtherAction: _ as { parameter: number },
  WhoKnows: _ as { notMe: boolean },
}

The above is a bit ugly but it's the most DRY I could be... otherwise I'd need to specify the key names twice; once for the payload mapping and once for the list of keys. Then you call getActionFactories() :

const Actions = getActionFactories(ActionPayloads);

The resulting Actions object acts sort of like a namespace. Observe:

const buttonClick = Actions.ButtonClick.buildAction({ whatever: 'hello' });
const someOtherAction = Actions.SomeOtherAction.buildAction({ parameter: 4 });
const whoKnows = Actions.WhoKnows.buildAction({ notMe: false });
const randomAction = Math.random() < 0.33 ? buttonClick : Math.random() < 0.5 ? someOtherAction : whoKnows

if (Actions.WhoKnows.isInstance(randomAction)) {
  console.log(randomAction.payload.notMe);
}

Does that work for you?

---

Update 1

@darpa said :

I'd like to be able to get the type of the resulting action.payload

Well, to get the type of the payload for ButtonClick , you could use the ActionPayloads object and do something like:

const buttonClickPayload: typeof ActionPayloads.ButtonClick = {whatever: 'hello'};
const buttonClick = Actions.ButtonClick.buildAction(buttonClickPayload);

Or, if you want Actions to expose this type, you could add a phantom Payload property to ActionFactory :

interface ActionFactory<T extends string, P> {
  isInstance(action: Action): action is Action<T, P>;
  buildAction(payload: P): Action<T, P>;
  Payload: P; // phantom property
}

Then you could refer to the payload type like this:

const buttonClickPayload: typeof Actions.ButtonClick.Payload = {whatever: 'hello'};
const buttonClick = Actions.ButtonClick.buildAction(buttonClickPayload);

But be careful not to actually try to use the value of Actions.ButtonClick.Payload , since it won't really exist:

console.log(Actions.ButtonClick.Payload.whatever); // okay in TS but blows up at runtime.

Hope that helps!