简体   繁体   中英

How to declare an optional generic type in an function props?

I want to create something similar to createAction from redux-toolkit. I need to pass a payload type to createAction, but I don't understand how to make an optional property mandatory if it was passed.

Here is my implementation.

type ActionFormat<P = undefined> = {type: string} & (P extends undefined ? {} : {payload: P})

export function createAction<P = undefined>(type: string): (payload?: P) => ActionFormat {
  const actionCreator = (payload?: P) => ({ type, payload: payload });
  return actionCreator;
}

Creation of actions

 const startFetch = createAction('START_FETCH');
 const successFetch = createAction<number>('SUCCESS_FETCH')

Run actions

startFetch(); //there are no errors. No payload required 
startFetch('test'); //must be an error Payload has been submitted
successFetch(); //must be an error Payload was not submitted
successFetch(123); // there are no errors.

You can use a conditional type to spread a tuple type to a rest parameter, making the parameter either required or not based on whether P extends undefined (ie is undeinfed or a union containing undefined)

export function createAction<P = undefined>(type: string): (...payload: 
  P extends undefined 
      ? [payload?: P] // P === undefined, no parameters required, but pay be passed in.
      : [payload: P] //P does not contain undefined parameter is required
  ) => ActionFormat {
  const actionCreator = (payload?: P) => ({ type, payload: payload });
  return actionCreator;
}

Playground Link

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM