时间戳

首页 > 解决方案 > 如何为 Typescript 中的 Object.values 获得的数组键赋予自定义类型？

reactjs - 如何为 Typescript 中的 Object.values 获得的数组键赋予自定义类型？

问题描述

代码：https ://codesandbox.io/s/zealous-morning-3q6gm?file=/src/App.tsx

错误：

'(key: Fiat) => JSX.Element' 类型的参数不能分配给'(value: string, index: number, array: string[]) => Element' 类型的参数。参数“key”和“value”的类型不兼容。类型“字符串”不可分配给类型“菲亚特”。

我想要实现的目标：引用需要 FIAT 类型的密钥。因此，当我映射时，我想将键添加为 FIAT 类型，而不仅仅是字符串。这甚至可能吗？如果是，我怎么能做到这一点？

标签： reactjstypescriptjsx

解决方案

一种选择是Object.keys(accounts)像这样设置类型：

(Object.keys(accounts) as Array<keyof typeof accounts>

所以你的整个代码就变成了：

export default function App() {
  const [accounts] = React.useState<AccountsMap>({
    "USD": 100,
    "AUD": 10,
    "BRL": 50
  });

  const [quote] = React.useState<Quote>({ USD: 2.5, AUD: 1.9, BRL: 5 });
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      {(Object.keys(accounts) as Array<keyof typeof accounts>).map((key: Fiat) => (
        <p> {quote[key]} </p>
      ))}

      {(Object.keys(accounts) as Array<keyof typeof accounts>).map((key: Fiat) => (
        <p> {quote[key]} </p>
      ))}
    </div>
  );
}

在这里，我们建议 typescript 将返回的字符串数组Object.keys(accounts)视为 typeof 帐户的键类型，在本例中为 type Fiat。

推荐阅读