Реагируют с машинописного текста - безопасность типов при выполнении функция setState

Поэтому я недавно обнаружил, что обратные вызовы для обработчиков событий плохо влияют на производительность рендеринга. Вздох. (https://reactjs.org/docs/handling-events.html )

Я пытаюсь учесть это, захватывая свойства события в методе класса, а не делая что-то вроде: onClick={({value}) => this.setState({"someProperty" as keyof State: value})} и т. д.

Однако теперь, когда я не могу явно объявить безопасность типов в этом обратном вызове, я пытаюсь быть динамичным об этом, и мой typechecker в порядке с кодом ниже, но как я могу сделать это жаловаться на то, что входной элемент имеет атрибут name, который не является атрибутом keyof State?

interface State {
  someProperty: string;
}

class MakeMeSafer extends React.Component<{}, State> {

  state: State = {
    someProperty: ''
  }

  set = ({ currentTarget: { name, value } }: React.SyntheticEvent<HTMLInputElement>): void => {
    this.setState({ [name as keyof State]: value });
  }

  render(): JSX.Element {
    return (
      <div>
        <input type="text" name="some-name-not-in-state" onChange={this.set} />
      </div>
    );
  }

}
1 3
javascript reactjs typescript setstate typesafe

1 ответ:

Вы явно приводите свое свойство name в качестве ключа State, поэтому нормально, что компилятор не жалуется.

Если вам нужна безопасность типа, я бы использовал закрытие вместо этого: 

interface State {
  someProperty: string;
}

class MakeMeSafer extends React.Component<{}, State> {

  state: State = {
    someProperty: ''
  }

  onChange = (name: keyof State) =>
    (e: React.FormEvent<HTMLInputElement>) => {
      const newValue = e.currentTarget.value;
      this.setState({name: newValue});
    }
  }

  render(): JSX.Element {
    return (
      <div>
        <input type="text" onChange={this.onChange('some-name-not-in-state')} />
      </div>
    );
  }
}
1