转换对象输入参数以赋予它们类型，以便 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 看起来像一个对象键值对。具体的错误消息是：

声明了"字符串"，但其值永远不会被读取。ts(6133(

绑定元素"string"隐式具有"any"类型.ts(7031(

所以现在我被难住了。如何注释 TypeScript 以便它编译？

提前感谢您的帮助！

Answer 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);
};

2. ...或。。。具有显式接口。

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

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