【问题标题】：react typescript issue on addEvenListener在 addEventListener 上反应打字稿问题
【发布时间】：2020-01-29 09:46:24
【问题描述】：

我有下面的实现，如果我不担心打字稿，它可以正常工作。

  const escFunction: (event: React.KeyboardEvent<Element>) => any = useCallback((event: React.KeyboardEvent["keydown"]) => {
    if (event.keyCode === KEY_CODE.ESC) {
      closeFn();
    }
  }, [closeFn]);

  if (closeTimeout) {
    setTimeout(closeFn, closeTimeout);
  }


  useEffect(() => {
    if (shouldCloseOnEsc) {
      document.addEventListener(KEY_EVENT.KEYDOWN, escFunction, false);
    }
    return () => {
      if (shouldCloseOnEsc) {
        document.removeEventListener(KEY_EVENT.KEYDOWN, escFunction, false);
      }
    }
  }, [shouldCloseOnEsc, escFunction]);

但document.addEventListener 和document.addEventListener 显示打字稿错误如下：

TypeScript error in /mnt/d/Projects/sb-modal/src/components/modal/Modal.tsx(63,7):
No overload matches this call.
  Overload 1 of 2, '(type: "input" | "progress" | "select" | "cancel" | "keydown" | "fullscreenchange" | "fullscreenerror" | "pointerlockchange" | "pointerlockerror" | "readystatechange" | "visibilitychange" | ... 85 more ... | "paste", listener: (this: Document, ev: MouseEvent | ... 14 more ... | ClipboardEvent) => any, options?: boolean | AddEventListenerOptions): void', gave the following error.
    Argument of type 'string' is not assignable to parameter of type '"input" | "progress" | "select" | "cancel" | "keydown" | "fullscreenchange" | "fullscreenerror" | "pointerlockchange" | "pointerlockerror" | "readystatechange" | "visibilitychange" | ... 85 more ... | "paste"'.
  Overload 2 of 2, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void', gave the following error.
    Argument of type '(event: KeyboardEvent<Element>) => any' is not assignable to parameter of type 'EventListenerOrEventListenerObject'.
      Type '(event: KeyboardEvent<Element>) => any' is not assignable to type 'EventListener'.
        Types of parameters 'event' and 'evt' are incompatible.
          Type 'Event' is missing the following properties from type 'KeyboardEvent<Element>': altKey, charCode, ctrlKey, getModifierState, and 12 more.  TS2769

    61 |   useEffect(() => {
    62 |     if (shouldCloseOnEsc) {
  > 63 |       document.addEventListener(KEY_EVENT.KEYDOWN, escFunction, false);
       |       ^
    64 |     }
    65 |     return () => {
    66 |       if (shouldCloseOnEsc) {

现在，如果我将行 const escFunction: (event: React.KeyboardEvent<Element>) => any = useCallback((event: React.KeyboardEvent<Element>) => { 更改为 const escFunction: any = useCallback((event: React.KeyboardEvent<Element>) => {，它可以正常编译。

我正在使用 react - 16.8.x create-react-app install。

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

您在文档上有一个事件监听器：document.addEventListener(KEY_EVENT.KEYDOWN, escFunction, false);

document.addEventListener 将使用 native 键盘事件调用回调（在本例中为 escFunction）。但是，您将回调 escFunction 注释为接受 React 键盘事件。

修复：使用正确的注释

改变

const escFunction: (event: React.KeyboardEvent<Element>)

到

const escFunction: (event: Event)

【讨论】：

我在更改为 const escFunction: (event: Event) => any = useCallback((event: KeyboardEvent): void => { 时收到错误 Type 'Event' is missing the following properties from type 'KeyboardEvent'

【解决方案2】：

addEventListener('keydown'... 将触发 KeyboardEvent。

所以使用：

const escFunction = (event: KeyboardEvent): void =>

Event 将部分工作，但会丢失一些您可能需要访问的属性，例如 .keyCode 或 .key。

【讨论】：