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;
}
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.