Как расширить дженерик MutableRefObject добавив в него новое свойство?

Чтобы расширить дженерик MutableRefObject и добавить в него новое свойство, вам потребуется использовать TypeScript-механизм расширения интерфейсов.

Для начала, давайте определим, что такое MutableRefObject. MutableRefObject является интерфейсом, определенным в библиотеке react, и используется для представления мутабельного (изменяемого) ref-объекта (ссылки на DOM-элемент) в React-компонентах. Он предоставляет доступ к актуальному значению ref-объекта, которое может быть изменено.

По умолчанию, MutableRefObject определен следующим образом:

interface MutableRefObject<T> {
  current: T | null;
}

Теперь, чтобы расширить его и добавить новое свойство, мы можем использовать TypeScript-механизм расширения интерфейсов. Для этого создадим новый интерфейс, который будет расширять MutableRefObject и добавлять новое поле. Например, мы можем добавить поле newProperty типа string:

interface ExtendedMutableRefObject<T> extends MutableRefObject<T> {
  newProperty: string;
}

Теперь вы можете использовать ExtendedMutableRefObject вместо MutableRefObject в ваших компонентах и получать доступ как к current (стандартному полю MutableRefObject), так и к newProperty. Например:

import { ReactNode, useRef } from 'react';

const MyComponent = (): JSX.Element => {
  const ref = useRef<ExtendedMutableRefObject<HTMLDivElement>>(null);

  // обращение к актуальному значению ref-объекта:
  console.log(ref.current);

  // изменение нового свойства:
  if (ref.current) {
    ref.current.newProperty = 'new value';
  }

  return (
    <div ref={ref}>Hello</div>
  );
};

Обратите внимание, что мы используем useRef и указываем тип ExtendedMutableRefObject<HTMLDivElement>, чтобы создать ref-объект с расширенными свойствами.

*Примечание*: Расширение интерфейса работает только в TypeScript. Если вы используете JavaScript или не хотите использовать расширение интерфейса, вы можете создать новый объект с полями MutableRefObject и newProperty и использовать его вместо MutableRefObject.