转换对象输入参数以赋予它们类型，这样 TypeScript 就不会报错

Question

我正在开发 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' is declared but its value is never read.ts(6133)

Binding element 'string' implicitly has an 'any' type.ts(7031)

所以现在我很困惑。我如何注释 TypeScript 以便它编译？

在此先感谢您的帮助！

Answer 1

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

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

内联界面。在此示例中，我们发送一个具有多个属性的对象，其中一个 key 是字符串类型。

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

...或...使用显式接口。

interface IMyType {
  key: string
}

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

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

转换对象输入参数以赋予它们类型，这样 TypeScript 就不会报错

Convert object input parameters to give them types so that TypeScript doesn't complain

typescript

react-hooks

react-typescript