Типизация событий в React: Обеспечение безопасности и понимания

В React, как и в любой другой библиотеке или фреймворке, обработка событий играет важную роль в создании интерактивных пользовательских интерфейсов. TypeScript позволяет нам улучшить безопасность и понимание кода, типизируя события. Давайте рассмотрим, как это делается.

Библиотека React поддерживает большинство стандартных событий DOM, и также предоставляет возможность создавать собственные пользовательские события 🖇️

Обработка cобытий в React

React предоставляет специальные атрибуты для обработки событий в компонентах. Например, onClick, onChange, onSubmit, и многие другие. Обработчики вызываются с объектом, который содержит информацию о событии и элементе, на котором оно произошло.

// Пример:
import React from "react";

const MyComponent = () => {
  const handleClick = (event) => {
    console.log("Клик!", event.target);
  };

  return (
    <button onClick={handleClick}>
      Нажми меня
    </button>
  );
};

Но как мы можем типизировать объект события и элемент, к которому он относится?

Обработка событий с помощью TypeScript

Для типизации событий мы можем использовать типы, предоставляемые React.

Вот как это делается:

// Пример:
import React from "react";

const MyComponent: React.FC = () => {
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log("Клик!", event.currentTarget);
  };

  return (
    <button onClick={handleClick}>
      Нажми меня
    </button>
  );
};

В этом примере мы используем React.MouseEvent<HTMLButtonElement>, чтобы указать, что event — это событие клика на элементе button. Это предостерегает нас от попыток обращения к несуществующим свойствам события или элемента и делает код более надежным.

Обработка событий в функциональных компонентах React

Если вы используете функциональные компоненты, как в примере выше, и вам нужно передать аргументы в обработчик события, вы можете использовать стрелочную функцию:

// Пример:
import React from "react";

const MyComponent: React.FC = () => {
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log("Клик!", event.currentTarget);
  };

  const handleMouseOver = (message: string) => (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log(`Наведение мыши: ${message}`);
  };

  return (
    <div>
      <button onClick={handleClick}>
        Нажми меня
      </button>
      <button onMouseOver={handleMouseOver("Кнопка 1")}>
        Наведи мышь
      </button>
    </div>
  );
};

Обработка событий в классовых компонентах React

Если вы используете классовые компоненты, типизация событий выполняется немного иначе:

// Пример:
import React, { Component } from "react";

class MyComponent extends Component {
  handleClick(event: React.MouseEvent<HTMLButtonElement>) {
    console.log("Клик!", event.currentTarget);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Нажми меня
      </button>
    );
  }
}

Здесь мы типизируем метод handleClick внутри класса.

Перечень некоторых наиболее часто используемых типов событий в React с указанием их типизации

onClick: React.MouseEvent<HTMLButtonElement>
onDoubleClick: React.MouseEvent<HTMLButtonElement>
onChange: React.ChangeEvent<HTMLInputElement>
onSubmit: React.FormEvent<HTMLFormElement>
onMouseOver: React.MouseEvent<HTMLDivElement>
onMouseOut: React.MouseEvent<HTMLDivElement>
onKeyDown: React.KeyboardEvent<HTMLInputElement>
onKeyPress: React.KeyboardEvent<HTMLInputElement>
onKeyUp: React.KeyboardEvent<HTMLInputElement>
onFocus: React.FocusEvent<HTMLInputElement>
onBlur: React.FocusEvent<HTMLInputElement>
onLoad: React.SyntheticEvent<HTMLImageElement, Event>
onError: React.SyntheticEvent<HTMLImageElement, Event>
onScroll: React.UIEvent<HTMLDivElement>
onDragStart: React.DragEvent<HTMLDivElement>
onDragOver: React.DragEvent<HTMLDivElement>
onDrop: React.DragEvent<HTMLDivElement>
onResize: React.UIEvent<Window>
onAnimationStart: React.AnimationEvent<HTMLDivElement>
onAnimationEnd: React.AnimationEvent<HTMLDivElement>
onContextMenu: React.MouseEvent<HTMLDivElement>

Заключение

Типизация событий в React с помощью TypeScript улучшает безопасность и читаемость вашего кода, предотвращая множество потенциальных ошибок на этапе разработки. Всегда старайтесь явно указывать типы для обработчиков событий, чтобы ваш код был более надежным и понятным. Это особенно важно в крупных проектах с множеством компонентов и событий.