React、Typescript 和 setState({ [name]: value }) 错误

Question

create-react-app在过去的几个月里，我一直在开发几个+ TypeScript 应用程序。在某些时候（我可能升级了 lib） tslint 开始this.setState({ [name]: value })在状态被赋予类型时抛出错误。它曾经让它滑动（除非我快疯了......不是不可能的）。

让 tslint 闭嘴的唯一方法是将状态类型更改为any，我不想这样做。如果我保存文件并yarn start获取更改，它运行良好......所以我可以忽略 tslint 在 vscode 中抛出的错误。

我明白为什么 tslint 会抛出错误。我想知道是否有规则可以设置为忽略此特定错误？

我看到这个的例子（第5行）：

class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {
...
private handleOnChange = (event: any) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });        <-- tslint no likey
}

错误：

[ts] '{ [x: number]: any; 类型的参数 }' 不可分配给类型为 'IMyComponentState| 的参数 ((prevState: Readonly, pro...'. Type '{ [x: number]: any; }' 不可分配给 type 'Pick

Answer 1

class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {
...
private handleOnChange = (event: any) => {
    const { name, value } = event.target;

    // @ts-ignore
    this.setState({ [name]: value });        <-- tslint no likey
}

Answer 2

您也可以在这里使用此解决方案：

interface IState {
    [key: string]: any; // or the type of your input
} 

我想这比忽略警告要好。