У меня возникли проблемы с TypeScript и хуком useReducer. Я хочу смоделировать форму, в которой каждый шаг имеет свой собственный тип и поля массива/объекта, но вывод типа не работает должным образом.
Приятного доброго дня. У меня проблемы с TypeScript и ловушкой useReducer.
- описывает связь между шагами формы и соответствующим им типом.
Код: Выделить всё
FormState
- возвращает ключи, тип которых является массивом.
Код: Выделить всё
ArrayKey
- возвращает ключи, тип которых является объектом.
Код: Выделить всё
ObjectKey
- призван моделировать общий тип объекта.
Код: Выделить всё
ObjectType
Код: Выделить всё
type FormState = {
stepOne: CreateUserStepOne;
stepTwo: CreateUserStepTwo;
stepThree: CreateUserStepThree;
}
export type Action<
K extends keyof FormState,
N extends ArrayKey,
O extends ObjectKey
> =
| { type: 'SET_STEP'; formStep: K; payload: FormState[K] }
| {
type: 'ADD_ITEM';
formStep: K;
objectKey: O;
arrayKey: N;
payload: ObjectType[];
}
| {
type: 'DELETE_ITEM';
formStep: K;
arrayKey: N;
payload: GridRowId[];
};
const reducer = <
K extends keyof FormState,
N extends ArrayKey,
O extends ObjectKey
>(
state: FormState,
action: Action
): FormState => {
switch (action.type) {
case 'DELETE_ITEM': {
return {
...state,
[action.formStep]: {
...state[action.formStep],
[action.arrayKey]: (state[action.formStep][action.arrayKey] as any[]).filter(
(item) => !action.payload.includes(item.id)
),
},
};
}
}
}
const [state, dispatch] = useReducer(reducer, initialState);
Код: Выделить всё
const dispatch: React.Dispatch
Я ожидал, что useReducer будет правильно отражать типы для каждого шага формы и его полей. Есть ли лучший способ определить этот редуктор, чтобы правильно определить тип отправки?
Подробнее здесь: https://stackoverflow.com/questions/797 ... usereducer