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

Question

[Boris007]

Так выглядит этот тип в исходнике

interface MutableRefObject<T> {
   current: T;
}

Я хотел добавить в него свойство prev

Но после уже решил в лоб расширить интерфейс интерфейсом, но всё равно не получается

interface MutableRefObject {
  prev: null | HTMLParagraphElement; 
}

const ref: MutableRefObject = useRef(null)
ref.prev = null

Property 'prev' is missing in type 'MutableRefObject<null>' but required in type 'MutableRefObject'.

Comments

[WbICHA]

Зачем ты расширяешь реф несуществующим свойством? Даже без учёта, что это нехорошо, это просто неразумно, реф есть реф и мутировать его, а не его значение, ни к чему хорошему не приведёт.

[Boris007]

WbICHA, у нас же реф это по сути объект, так почему в него нельзя добавить еще одно свойство?
Тут по факту ругается только TS, в JS все четко с таким подходом.
И тут хочется понять, как в вообще расширять такие интерфейсы и почему он не расширяется классическими способами

Answer 1

[Aetae]

Ну какбэ очевидно, что:

interface MutableRefObject<T> {
  prev: null | HTMLParagraphElement; 
}

Если интeрфейс в либе, то:

declare module 'lib-name' {
  interface MutableRefObject<T> {
    prev: null | HTMLParagraphElement; 
  }
}

Или, хуже:

declare module 'lib-name/full/path/to/declaration.ts' {
  interface MutableRefObject<T> {
    prev: null | HTMLParagraphElement; 
  }
}

Но вообще, если для себя то делай так:

interface MySuperMutableRefObject extends MutableRefObject<T> {
  prev?: null | HTMLParagraphElement; 
}

и не трогай библиотечный тип.

Comments

[Boris007]

Почему он ругается здесь?

interface MutableRefObject<T> {
  prev?: null | HTMLParagraphElement; 
}

const ref: MutableRefObject<null | HTMLParagraphElement> = useRef(null)
ref.prev = null

Type 'MutableRefObject<null>' has no properties in common with type 'MutableRefObject<HTMLParagraphElement | null>'

Тоже пробовал делать, как ты показал

interface MySuperMutableRefObject extends MutableRefObject<T> {
  prev?: null | HTMLParagraphElement; 
}

Cannot find name 'T'.

const ref: MySuperMutableRefObject = useRef(null)
ref.prev = null

[Aetae]

1. Ну собсно то что написано, пробовал читать?

Тип 'MutableRefObject<null>' не имеет ничего общего с 'MutableRefObject<HTMLParagraphElement | null>'

Ты делаешь useRef без указания типа, и передаёшь ему null, ts и выводит тип MutableRefObject<null>, откуда ему знать что ты туда ещё и HTMLParagraphElement класть хочешь?

Надо так:

const ref: MutableRefObject<null | HTMLParagraphElement> = useRef<null | HTMLParagraphElement>(null);

Проще так:

const ref = useRef<HTMLParagraphElement>(); // нафига те null если undefined тоже неплох:)

2. Ну само собой:

interface MySuperMutableRefObject<T> extends MutableRefObject<T> {
  prev?: null | HTMLParagraphElement; 
}

На глазок писал, не проверяя.:)

[Boris007]

Aetae, спасибо!
Буквально минуту назад добавил в MySuper, не успел отредактировать )

interface MySuperMutableRefObject<T> extends MutableRefObject<T> {
  prev?: null | HTMLParagraphElement; 
}

[Boris007]

Aetae, почему только через extends расширяется и только с свойством, которое с вопросом?
Ведь везде пишут, что фишка интерфейса в том, что мы можем создать два и более интерфейсов с одинаковыми названиями и они будут расширять друг друга без лишних движений
Здесь что пошло не так?

[Aetae]

Boris007, как расширять библиотечный метод я тебе написал. Ругается у тебя он совсем по другой причине(поправил коммент выше с подробностями).

declaration merging - это продвинутая фича для продвинутых юзеров. В обычном случае ты не должен расширять библиотечные типы. Ты должен создавать свои.

Почему работает только опционально поле? Потому что оно опционально.

Ты не можешь присвоить объект

{ 
  foo: 'string'
}

типу

{ 
  foo: string 
  bar: string 
}

но можешь типу

{ 
  foo: string 
  bar?: string 
}

Потому что во втором случае тип разрешает отсутствие bar.

То же самое происходит и здесь: типу MySuperMutableRefObject у которого есть prev ты присваиваешь обычный MutableRefObject(полученный из useRef) у которого нет prev.

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

interface MySuperMutableRefObject<T> extends MutableRefObject<T> {
  prev: null | HTMLParagraphElement; 
}
function useMySuperRef<T>(value?: T): MySuperMutableRefObject<T> {
  const ref = useRef(value) as MySuperMutableRefObject<T>;
  ref.prev ??= null;
  return ref;
}

[Boris007]

Aetae, спасибо!