1

我正在开发一个 TypeScript React 应用程序。我想找到并使用 Hook 来处理击键。我找到了以下 JS 组件：

import { useEffect, useState } from "react";

const useKeyPress = (targetKey) => {
  const [keyPressed, setKeyPressed] = useState(false);

  const downHandler = ({ key }) => {
    if (key === targetKey) setKeyPressed(true);
  };

  const upHandler = ({ key }) => {
    if (key === targetKey) setKeyPressed(false);
  };

  useEffect(() => {
    window.addEventListener("keydown", downHandler);
    window.addEventListener("keyup", upHandler);

    return () => {
      window.removeEventListener("keydown", downHandler);
      window.removeEventListener("keyup", upHandler);
    };
  }, []);

  return keyPressed;
};
export default useKeyPress;

为了让 TypeScript 不再因为缺少类型而骚扰我，我开始记录它们。第一个很简单：我改成const useKeyPress = (targetKey) => {了const useKeyPress = (targetKey:string) => {，效果很好。

但接下来，我想注释const downHandler = ({ key }) => {. 当我试图说 const downHandler = ({ key:string }) => {时，TypeScript 拒绝编译，因为我假设 key:string 看起来像一个对象键值对。具体的错误信息是：

'string' 被声明但它的值永远不会被读取。ts(6133)

绑定元素“字符串”隐式具有“任何”类型.ts(7031)

所以现在我很难过。如何注释 TypeScript 以便编译？

在此先感谢您的帮助！

4

1 回答 1

1

第二个问题与您告诉 TypeScript/JavaScript 做什么有关。在这种情况下const downHandler = ({ key:string }) => {，告诉 TypeScript 解构一个具有名为的属性的对象，key并且您希望将属性的值存储key到参数key中，但是当您指定 '{ key:string }' 时，您表示您正在接收（解构）一个键/值对，但语法错误。

实现您想要的实际语法是指定一个接口，它可能是：

  1. 内联接口。在这个示例中，我们发送一个具有多个属性的对象，其中一个key是字符串类型。
const downHandler = ({ key }: { key: string }) => {
    if (key === targetKey) setKeyPressed(true);
};
  1. ...或...具有显式接口。
interface IMyType {
  key: string
}

const downHandler = ({ key }: IMyType) => {
    if (key === targetKey) setKeyPressed(true);
};

您可以在这篇文章中找到关于解构的很好的解释和示例：https ://medium.com/@rileyhilliard/es6-destructuring-in-typescript-4c048a8e9e15

于 2020-06-02T22:30:15.077 回答