代码之家 › 专栏 › 技术社区 › BenjiFB

动态赋值时出现Typescript 2.9错误

typescript

2

BenjiFB · 技术社区 · 7 年前

使用此代码:

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

我得到这个类型脚本错误: “{[x:number]:any;}”类型的ts2345 typescript(ts)参数不能分配给“{id:number;redirect:boolean;filter:string;player:player;}”((prevstate:reado…')”

但如果我这样做:

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

没有错误。尽管有错误,代码运行良好。我想这是从TypeScript2.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 });
        }
    }

这很有用。在TypeScript2.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;

1 回复 | 直到 7 年前

1

Fenton 7 年前

当元素类型有可能不是我所期望的类型时,我倾向于用皮带和支架固定它们。

下面是一个改编自 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 });
    }
}

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