打字稿：函数接受 2 种类型，但其中一种类型上不存在属性

Question

我有一个函数，它有两种类型。

handleDragging(e: CustomEvent<SelectionHandleDragEventType | GridHandleDragEventType>) {
e.stopPropagation();
const newValue = this.computeValuesFromPosition(e.detail.x, e.detail.y, e.detail.variant);
// other same code
})

问题是CCD_ 1不具有作为类型的一部分的CCD_。在这种情况下，我不介意发送null，但我一直收到TS问题：Property 'variant' does not exist on type 'GridHandleDragEventType'.有没有干净的方法来解决这个问题？

Answer 1

您可以尝试其中一种方法，我会使用Partial方法，但由于您需要variant属性，可以使用第二种。

e: CustomEvent<SelectionHandleDragEventType | Partial<GridHandleDragEventType>>

或

e: CustomEvent<SelectionHandleDragEventType | GridHandleDragEventType & {variant: null}>

Answer 2

下面的示例利用TypeScript的结构类型使用{ detail: { x: number, y: number, variant?: string } }而不是SelectionHandleDragEventType | GridHandleDragEventType。

我假设x和y是number，GridHandleDragEventType0是string——如果这些不是这些属性的实际类型，那么您应该能够更改这个示例：

handleDragging(e: CustomEvent<{ detail: { x: number, y: number, variant?: string } }>) {
e.stopPropagation();
const newValue = this.computeValuesFromPosition(e.detail.x, e.detail.y, e.detail.variant ?? null);
})

正如您所提到的，这也将GridHandleDragEventType的variant默认为null，但如果computeValuesFromPosition处理variant参数undefined，则不一定需要。