reactjs - Pick 带有动态/计算键的类型

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 将是(联合)类型 "name"|"age"，这正是我们想要的。 但是在表达式 this.setState({ [key]: value }); 变量 key 被(错误地)扩展为 字符串.

---

tl;dr; TypeScript 中似乎存在错误。我将问题发布到 Github 存储库和 TypeScript 团队 is investigating the problem . :)

作为临时解决方法，您可以:

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