Typescript: изменение типа элемента объекта

Мне нужно улучшить некоторые особенности React dom elements. В d.tsсписке элементов DOM как

interface ReactDOM {
    // HTML
    a: HTMLFactory;
    abbr: HTMLFactory;
    address: HTMLFactory;
    area: HTMLFactory;
    article: HTMLFactory;
    aside: HTMLFactory;
    ...

но в моем JS каждый элемент является оболочкой функций для React’s one.
Мне нужно что-то вроде:

type MyHTMLFactory = DOMFactory<HTMLProps<HTMLElement> & SMTH>;

Вопрос в том, как сказать TypeSript, что у меня есть объект с теми же ключами, но с другим типомMyHTMLFactory

1 ответ

  1. Можно объявить интерфейс с универсальным типом (T)

    interface IReactDom<T> {
       a: T;
       abbr: T;
       address: T;
       area: T;
       article: T;
       aside: T;
    }
    
    let myObj: IReactDom<HTMLFactory> = ...
    myObj.a // HTMLFactory
    

    Примечание: Doc-дженерики

    * РЕДАКТИРОВАТЬ *

    Я могу расширять и добавлять новые элементы, но как изменить тип базовых элементов?

    Насколько я знаю о typscript, нет официального чистого способа сделать это… но вы можете создать немного взломать, чтобы решить эту проблему.
    Предположим, есть interface(от React в этом примере), который вы не можете изменить, давайте назовем егоIBaseType, например

    interface IBaseType {
        a: string
        b: string
        c: string
        n: number
        m: number   
    }
    

    Наша цель-определить пользовательский типIGoalType, который не только расширяетсяIBaseType, но и изменяет типa, b& cto Object(например). Чтобы сделать это, нам понадобится третий (Да, это не чистое решение) интерфейс, который будет действовать как » мост»

    interace IBridge extends IBaseType {
      a: any
      b: any
      c: any
    }
    
    interface IGoalType extends IBridge {
      a: Object
      b: Object
      c: Object
    }
    

    Теперь протестируйте его:

    let o: IGoalType
    o.a // Object
    o.a // Object
    o.a // Object
    o.n // number
    o.m // number