Question

与How do I dynamically assign properties to an object in TypeScript?

相似但不同

我有一个状态类型的组件：

{
  low: string
  high: string
}

和React中的常见模式一样，我的事件处理程序是：

handleChange = (e) => {
  let { name, value } = e.target;
  this.setState({ [name]: value });
};

我的输入具有high和low属name属性。打字稿错误：

Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'Pick<State, "low" | "high">'

我有没有办法告诉Typescript我只期望这两个值？我想避免明确地将密钥传递给处理程序，但又不想将状态更改为：

{
  low: string
  high: string
  [key: string]: string
}

Answer 1

在完美的世界中，我们应该能够写出这样的东西：

private handleChange = (e: {target: {name: "low" | "high", value: string}}) =>
{
    const { name, value } = e.target;

    this.setState({[name]: value});
}

但不幸的是，报告的错误（请参阅here或here）迫使我们使用某些临时解决方法，例如转换为任何或类似的错误：

this.setState({[name]: value} as any);

React事件处理程序中带有Typescript的动态对象键

1 个答案: