React + TypeScript：调整大小事件的类型错误

Question

另一个 React + TypeScript 事件处理程序问题。

如何修复这种类型的错误？

        const onResize = (
            event: React.UIEvent<Window, "resize">,
        ) => {
            console.log(event.target);
        };

        window.addEventListener("resize", onResize);

这会抛出

No overload matches this call.
  Overload 1 of 2, '(type: "resize", listener: (this: Window, ev: UIEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error.
    Argument of type '(event: React.UIEvent<Window, "resize">) => void' is not assignable to parameter of type '(this: Window, ev: UIEvent) => any'.
      Types of parameters 'event' and 'ev' are incompatible.
        Type 'UIEvent' is missing the following properties from type 'UIEvent<Window, "resize">': nativeEvent, isDefaultPrevented, isPropagationStopped, persist
  Overload 2 of 2, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error.
    Argument of type '(event: React.UIEvent<Window, "resize">) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'.
      Type '(event: React.UIEvent<Window, "resize">) => void' is not assignable to type 'EventListener'.
        Types of parameters 'event' and 'evt' are incompatible.
          Type 'Event' is missing the following properties from type 'UIEvent<Window, "resize">': detail, view, nativeEvent, isDefaultPrevented, and 2 more.  TS2769

Answer 1

我认为在这种情况下你可以使用“事件”界面。

const onResize = (
        event: Event,
    ) => {
        console.log(event.target);
    };

类型 'Event' 缺少类型 'UIEvent' 中的以下属性

这一行表示Event 类型（来自onResize）缺少UIEvent<Window, "resize"> 不提供的一些属性。

编辑： 如果我们想访问像event.target.screen 这样的属性，你需要明确告诉 TypeScript 你的目标类型。

做到这一点的方法是使用泛型类型将其转换为适当的类型：

const onResize = (event: Event) => {
  const target = event.target as Window
  console.log(target.screen)
}

这会让 TypeScript 知道目标的类型是 window，这样它就会知道 screen 属性。