Параметр «e» неявно имеет тип «любой» React TypeScript

Question

Я пытаюсь реализовать это в файле React TypeScript:

export class MainInfo extends Component<IProps>{
  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  render() {
    const { values1, handleChange } = this.props
    return (
      <div>
        <Formik
          validateOnChange={true}
          validationSchema={validationSchema}
          initialValues={{ Title: '', ActivationDate: '', ExpirationDate: '', DirectManager: '', HRBP: '' }}
          onSubmit={(data) => {
            console.log(data)
          }}

Но я получаю параметр 'e', ​​неявно имеющий ошибку React TypeScript любого типа. Как мне это исправить?

Редактировать: у меня есть это в другом файле, который я использую здесь в качестве реквизита

nextStep = () => {
    const { step } = this.state;
    this.setState({
      step: step + 1
    });
  };

  // Go back to prev step
  prevStep = () => {
    const { step } = this.state;
    this.setState({
      step: step - 1
    });
  };

  // Handle fields change
  handleChange = input => e => {
    this.setState({ [input]: e.target.value });
  };

Answer 1

В этом случае e - Событие некоторого вида. Если вы не знаете, что такое Type что-то, «any» является значением по умолчанию, например,

handleChange = input => (e:any) => {
    this.setState({ [input]: e.target.value });
  };

Так что в краткосрочной перспективе используйте any. Если вы хотите точно знать, какого типа это, скорее всего, входное событие, и вы можете найти этот ввод Typescript onchange event.target.value полезным

Answer 2

При написании TypeScript вы должны обращаться к исходному коду или документам библиотеки, чтобы узнать, какие у нее типы

Например, в types.tsx от Formik мы видим

handleChange(e: React.ChangeEvent<any>): void;

Мы также можем посмотреть в типах React:

interface ChangeEvent<T = Element> extends SyntheticEvent<T>

Итак, что-то вроде

handleChange = input => (e: React.ChangeEvent<HTMLInputElement>) => {
  this.setState({ [input]: e.target.value });
};

... может работать для you.

Также, если ваша IDE поддерживает TypeScript, это поможет.

Answer 3

Вы должны указать e тип. Например:

continue = (e: React.FormEvent<HTMLInputElement>) => {
  e.preventDefault()
}

Typescript будет кричать на вас, если вы не назначаете типы для переменных и аргументов функций.