带有动态分配的 Typescript 2.9 错误

Question

使用此代码：

else if (event.target.id == 'filter') {
            this.setState({ [event.target.id]: event.target.value });

我收到此打字稿错误： TS2345 TypeScript (TS) 类型参数 '{ [x: number]: any; }' 不能分配给 '{ id: number; 类型的参数；重定向：布尔值；过滤器：字符串；播放器：播放器； } | (((prevState: Reado...'.' ...

但如果我改为这样做：

else if (event.target.id == 'filter') {
            this.setState({ filter: event.target.value });

没有错误。尽管出现错误，但代码运行良好。我认为这是从 TypeScript 2.9 开始的。我意识到我可以只使用第二个示例，但我还有其他代码，例如：

handleChange(event) {
        if (event.target.type == 'checkbox') {
            this.setState({ [event.target.id]: event.target.checked });
        } else {
            this.setState({ [event.target.id]: event.target.value });
        }
    }

这很有用。在 TypeScript 2.9 中有没有更好的方法来做到这一点？

更新：也相关：

type PlayerListState = {
    id: number,
    redirect: boolean,
    filter: string,
    player: GamePlayer
};

class PlayerListComponent extends React.Component<PlayerListProps, PlayerListState> {

以及来自 React 的 SetState 的类型定义：

    setState<K extends keyof S>(
        state: ((prevState: Readonly<S>, props: P) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
        callback?: () => void
    ): void;

Answer 1

当我的元素类型有可能不是我所期望的时，我倾向于束手无策。

这是一个改编自this blog post on narrowing types的示例。

function isInputElement(target: EventTarget | any): target is HTMLInputElement {
  if (!target) {
    return false;
  }

  return (target.tagName && target.tagName === 'INPUT')
}

// Note: Arbitrary element selection to make the demo complete :)
document.getElementById('filter').onload = (e) => {
    const target = e.target;

    if (!isInputElement(target)) {
        return;
    }

    if (target.id == 'filter') {
        this.setState({ [target.id]: target.value });
    }
}

在类型保护中，当事件目标实际上不是 INPUT 元素时，您可以抛出异常、记录消息或采取任何需要的操作。