TL; DR

Question

window.onClick的正确类型是什么，我的孩子对any不满意

import React, { useContext, useState } from 'react';
import { Link } from 'react-router-dom';
import { Global } from '../globalState';
import { Dispatch, LOGGED_IN, SET_MODAL } from '../globalState';

interface PropsInterface {
  avatar: string;
  loggedIn: boolean;
  fullName: string;
}

const TopNav: React.FC<PropsInterface> = (props: PropsInterface) => {
...
window.onclick = (event: any) => {
//                        ^
//                        What is the correct type ??       
    if (
      event.target.id !== 'dropdown'
    ) {
      setState((prev) => ({
        ...prev,
        dropDownStatus: false,
      }));
    }
  };

Answer 1

这是在默认DOM类型定义中定义的。

在最新版本中，您可以在lib.dom.d.ts的{{3}}中找到此定义：

...

/**
 * Fires when the user clicks the left mouse button on the object
 * @param ev The mouse event.
 */
onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;

...

因此正确的类型应为MouseEvent：

window.onclick = (event: MouseEvent) => { }

如果您确实要映射目标的id，则可以执行以下操作：

window.onclick = (event: MouseEvent & { target: {id: string}}) => { }

TL; DR

这部分没有回答问题，但是有助于解决进一步的问题。

您希望关闭下拉菜单，如果没有单击下拉菜单，对吗？我认为您最好在下拉列表中添加line 5903并比较它而不是ID：

Answer 2

对于合成元素，可以使用React.MouseEvent。

React TypeScript：窗口onClick类型

2 个答案:

TL; DR