Как типизировать компоненты с HTML-атрибутами и рефами?

Типизация компонентов с HTML-атрибутами и рефами

В React при создании компонентов, которые оборачивают нативные HTML-элементы, важно правильно типизировать пропсы, чтобы сохранить поддержку стандартных атрибутов (например, className, id, onClick). TypeScript предоставляет встроенные типы, такие как React.HTMLAttributes и React.InputHTMLAttributes, которые можно расширить для добавления кастомных пропсов. Рефы (refs) используются для прямого доступа к DOM-элементам и должны быть типизированы с помощью React.RefObject или React.MutableRefObject.

Пример типизации компонента с HTML-атрибутами

Допустим, мы создаём компонент CustomInput, который принимает все стандартные атрибуты input и дополнительный пропс label. Используем пересечение типов:

import React from 'react';

interface CustomInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
}

const CustomInput: React.FC<CustomInputProps> = ({ label, ...inputProps }) => {
  return (
    <div>
      <label>{label}</label>
      <input {...inputProps} />
    </div>
  );
};

Теперь компонент принимает все атрибуты input (placeholder, value, onChange и т.д.) плюс label.

Типизация рефов

Рефы типизируются с помощью дженерика в useRef. Например, для доступа к input:

import React, { useRef } from 'react';

const MyComponent: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  const focusInput = () => {
    inputRef.current?.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus</button>
    </div>
  );
};

Тип HTMLInputElement гарантирует, что мы можем вызывать методы, специфичные для input (focus, select).

Передача рефов в дочерние компоненты

Для передачи рефа в функциональный компонент используйте React.forwardRef:

const FancyInput = React.forwardRef<HTMLInputElement, { placeholder: string }>(
  (props, ref) => {
    return <input ref={ref} placeholder={props.placeholder} />;
  }
);

// Использование
const parentRef = useRef<HTMLInputElement>(null);
<FancyInput ref={parentRef} placeholder="Type here" />;

Это позволяет родительскому компоненту управлять фокусом или значением дочернего input.

Вывод

Типизация HTML-атрибутов и рефов в React с TypeScript повышает надёжность кода, предотвращая ошибки типов при работе с DOM. Используйте встроенные типы React и forwardRef для гибкой передачи рефов. Это особенно полезно в крупных проектах с множеством UI-компонентов.