类型 '{ [x: string]: string; 中缺少属性}'答案

【问题标题】：Property is missing in type '{ [x: string]: string; }'类型 '{ [x: string]: string; 中缺少属性}'
【发布时间】：2018-03-03 20:48:43
【问题描述】：

在这个 react 应用程序中有一个带有几个输入字段的表单。这些字段都使用带有onChange 属性的this.handleChange。

private handleChange = (event: React.FormEvent<HTMLInputElement>) => {
    let target = event.target as HTMLInputElement;
    this.setState({
        [target.name]: target.value
    });
};

我得到的打字稿错误是：

ERROR in [at-loader] ./src/components/FormSubmitHighScore.tsx:43:23 
TS2345: Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'Pick<State, "first_name" | "last_name" | "email_address" | "school_name" | "region" | "submitted">'.
Property 'first_name' is missing in type '{ [x: string]: string; }'.

因此，通过动态设置状态名称字段（基于正在使用的输入）这个 Typescript 错误被触发（但它确实在浏览器中工作）。

如何在这种情况下指定正确的类型？

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

将函数传递给 setState 也可以。我的猜测是因为你在传播状态，所以 typescript 知道它具有状态的所有属性。

    this.setState(state => ({
      ...state,
      [name]: value,
    }));

我遇到了与您遇到的类似的错误。这是我对更改处理程序的实现：

  onChange = (name: keyof ComponentState, value: any) => {
    this.setState(state => ({
      ...state,
      [name]: value,
    }));
  };

【讨论】：

【解决方案2】：

为了避免“任何” linter 警告我使用：

this.setState({
  [target.name]: target.value
} as Pick<State, keyof State>);

【讨论】：

如果值不是字符串，这将不起作用。至少，当值可以是数字时

【解决方案3】：

不幸的是，直到 these bugs 得到修复 - 你必须采用一些丑陋的解决方法，例如：

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

【讨论】：

讨厌。不过谢谢！