В TypeScript для типизации React-компонентов, которые принимают HTML-атрибуты и рефы, обычно используют встроенные типы из @types/react.

Для функциональных компонентов с forwardRef можно использовать React.ForwardRefRenderFunction или React.forwardRef с generics.

Пример типизации компонента с HTML-атрибутами и рефом на элемент input:

import React, { forwardRef, InputHTMLAttributes } from 'react';

interface MyInputProps extends InputHTMLAttributes<HTMLInputElement> {
  customProp?: string;
}

const MyInput = forwardRef<HTMLInputElement, MyInputProps>((props, ref) => {
  const { customProp, ...rest } = props;
  return <input ref={ref} {...rest} />;
});

export default MyInput;

Здесь:

InputHTMLAttributes<HTMLInputElement> добавляет все стандартные атрибуты для <input>.
forwardRef позволяет передать реф к DOM-элементу.

Для других элементов можно использовать соответствующие интерфейсы, например ButtonHTMLAttributes<HTMLButtonElement> и т.д.

Это обеспечивает корректную типизацию пропсов и рефов, улучшая автодополнение и предотвращая ошибки.

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