reactjs - ReactTestUtils Simulate.Change 参数类型 SyntheticEventData 错误

Question

下面这段代码是用 typescript 写的，它使用了“react-dom/test-utils”中的 ReactTestUtils。

let nameInput = TestUtilsExtended.findRenderedDOMComponentWithTag(root, "input");

TestUtilsExtended.Simulate.change(nameInput, {
    target: {
        value : "alice"
    }
} as any);

它工作正常，当我将 as any 强制转换时，结果符合预期。如果我删除转换，则会发生此错误:

[ts] Argument of type '{ target: { value: string; }; }' is not assignable to parameter of type 'SyntheticEventData'. Types of property 'target' are incompatible. Type '{ value: string; }' is not assignable to type 'EventTarget'. Object literal may only specify known properties, and 'value' does not exist in type 'EventTarget'.

这是我从 @types/react-dom(版本:^15.5.4) 获得的 Simulate.change 的智能感知:

const Simulate.change: (element: React.ReactInstance, eventData?: SyntheticEventData) => void

在SyntheticEventData接口(interface)的声明中，我发现target属性的类型是Javascript EventTarget。 :

export interface OptionalEventProperties {
    // ....
    target?: EventTarget;
}

export interface SyntheticEventData extends OptionalEventProperties {
    // ....
}

由于当我将 as any 强制转换时代码按预期工作，我不太明白这个 EventTarget 接口(interface)是如何工作的。

你们知道删除 as any 转换的解决方法吗？因为如果可能的话，我想尽量减少在我的代码中将任何内容强制转换为 any 。我想让代码强类型化。

Answer 1

您需要转换为未知，然后将其转换为 EventTarget

let nameInput = TestUtilsExtended.findRenderedDOMComponentWithTag(root, "input");

TestUtilsExtended.Simulate.change(nameInput, {
    target: {
        value : "alice"
    }
} as unknown as EventTarget);