挑 ~~使用动态/计算键键入~~

Question

最新的@types/react（v15.0.6）利用TypeScript 2.1中添加的功能setState，即Pick<S, K>。这是一件好事，因为现在的输入是正确的，因为在更新之前，“不知道”的输入setState是合并的this.state，而不是替换它。

同样，使用Pick使得setState功能在允许输入方面非常严格。无法再将state未在组件定义中定义的属性添加到中（的第二个泛型）React.Component。

但是，也很难定义动态更新处理程序。例如：

import * as React from 'react';


interface Person {
  name: string;
  age: number|undefined;
}


export default class PersonComponent extends React.Component<void, Person> {
  constructor(props:any) {
    super(props);

    this.state = { 
      name: '',
      age: undefined
    };
    this.handleUpdate = this.handleUpdate.bind(this);
  }

  handleUpdate (e:React.SyntheticEvent<HTMLInputElement>) {
    const key = e.currentTarget.name as keyof Person;
    const value = e.currentTarget.value;
    this.setState({ [key]: value });
  }

  render() {
    return (
      <form>
        <input type="text" name="name" value={this.state.name} onChange={this.handleUpdate} />
        <input type="text" name="age" value={this.state.age} onChange={this.handleUpdate} />
      </form>
    );
  }
}

该setState函数将引发以下错误

[ts] Argument of type '{ [x: string]: string; }' is not assignable 
     to parameter of type 'Pick<Person, "name" | "age">'.
       Property 'name' is missing in type '{ [x: string]: string; }'.

即使类型key是"name" | "age"。

我无法找到一个解决方案，比拥有一个单独的其他updateName和updateAge功能。有谁知道如何Pick与动态键值一起使用？

Answer 1

因此，在进行了更多研究之后，我可以提供一些有关上述代码中发生的情况的上下文。

当你这样做const name = 'Bob'的变量的类型name是'Bob' 不是
字符串。但是，如果你更换const了let（let name = 'Bob'）的变量name将是类型string。

这个概念称为“扩大”。基本上，这意味着类型系统尝试尽可能明确。由于const无法重新分配，TypeScript可以推断出确切的类型。let语句可以重新分配。因此，TypeScript将string（在上面的示例中）推断为的类型name。

也会发生同样的情况const key = e.currentTarget.name as keyof Person。key将是（union）类型"name"|"age"，这正是我们想要的。 但是 在表达式this.setState({ [key]: value });变量key中（错误地）将其扩展为string。

tl; dr;
看来TypeScript中有错误。我将该问题发布到了Github仓库中，TypeScript团队正在调查该问题。:)

作为临时解决方法，您可以执行以下操作：

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