基于枚举值的可选属性

Question

我正在尝试让一些键入内容用于反应useReducer。

基本上我有一个基于另一个属性值的可选属性(data(的动作 - 所以如果STATUS是VIEW或EDIT，该动作必须具有data属性。我几乎有一些工作，但有一种情况(见下文(失败了。

我想一种方法是明确设置STATUS.NEW不需要额外的属性({ type: 'SET_STATUS'; status: STATUS.NEW }(，但我想知道是否有更好的方法。如果将来我添加了一堆不同的状态，那么我必须指定每个状态都不需要数据属性。

打字稿游乐场

enum STATUS {
NEW = 'new',
VIEW = 'view',
EDIT = 'edit'
}
/*
if status is 'view', or 'edit', action should also contain
a field called 'data'
*/
type Action =
| { type: 'SET_STATUS'; status: STATUS }
| { type: 'SET_STATUS'; status: STATUS.VIEW | STATUS.EDIT; data: string; }

// example actions
// CORRECT - is valid action
const a1: Action = { type: 'SET_STATUS', status: STATUS.NEW }
// CORRECT - is a valid action
const a2: Action = { type: 'SET_STATUS', status: STATUS.VIEW, data: 'foo' }
// FAILS - should throw an error because `data` property should be required
const a3: Action = { type: 'SET_STATUS', status: STATUS.EDIT }
// CORRECT - should throw error because data is not required if status is new
const a4: Action = { type: 'SET_STATUS', status: STATUS.NEW, data: 'foo' }

问题的第二部分是我如何将它合并到下面的useCallback中。我本以为 useCallback 能够正确地将参数推断为适当的操作类型。

/* 
assume:
const [state, dispatch] = useReducer(stateReducer, initialState)
*/
const setStatus = useCallback(
(payload: Omit<Action, 'type'>) => dispatch({ type: 'SET_STATUS', ...payload }),
[],
)
/* 
complains about:
Argument of type '{ status: STATUS.EDIT; data: string; }' is not assignable to parameter of type 'Pick<Action, "status">'.
Object literal may only specify known properties, and 'data' does not exist in type 'Pick<Action, "status">'
*/
setStatus({ status: STATUS.EDIT, data: 'foo' })

Answer 1

您可以定义一个需要data雕像的联合，然后在代表所有其他雕像的操作中排除它们：

enum STATUS {
NEW = 'new',
VIEW = 'view',
EDIT = 'edit'
}
type WithDataStatuses = STATUS.VIEW | STATUS.EDIT;
type Action =
| { type: 'SET_STATUS'; status: Exclude<STATUS, WithDataStatuses> }
| {
type: 'SET_STATUS';
status: WithDataStatuses;
data: string;
}
// now CORRECT - data is required
const a3: Action = { type: 'SET_STATUS', status: STATUS.EDIT }

Answer 2

回答问题的第二部分：-(

假设您已经按照 @Aleksey L 的建议定义了Actions，useCallback可以通过键入如下方式

// This is overloaded function which can take data or not depending of status
interface Callback {
(payload: { status: Exclude<STATUS, WithDataStatuses> }): void;
(payload: { status: WithDataStatuses; data: string; } ): void;
}
const [state, dispatch] = React.useReducer(stateReducer, {})
// Explicitly type useCallback with Callback interface
const setStatus = React.useCallback<Callback>(
(payload) => dispatch({ type: 'SET_STATUS', ...payload }),
[],
)
setStatus({ status: STATUS.EDIT, data: 'foo' })
setStatus({ status: STATUS.NEW })

工作演示