Question

使用此代码：

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

我收到此打字稿错误： TS2345 TypeScript（TS）类型'{[x：number]：any; }'不能赋值给'{id：number; redirect：boolean; filter：string;球员：球员; } | （（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元素时采取任何操作。

动态分配的Typescript 2.9错误

1 个答案: