Typescript: change type of object member

Question

I need to improve some features of React DOM elements. In d.ts there is a list of DOM elements like

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

but in my JS every element is function wrapper for React's one. I need something like:

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

The question is how to tell TypeSript that i have object with the same keys but with diffrent type MyHTMLFactory

Manu Artero · Answer 1 · 2016-05-01T19:39:33.917

0

You can declare an interface with a generic type (T)

interface IReactDom<T> {
   a: T;
   abbr: T;
   address: T;
   area: T;
   article: T;
   aside: T;
}

let myObj: IReactDom<HTMLFactory> = ...
myObj.a // HTMLFactory

Note: Doc - generics

* EDIT *

I can extend and add new elements but how can I change the type of the base elements?

As I know about typscript, there is no official - clean way to do this... but you can create a little hack to solve this.
Let's say there is an interface (from React in this example) you cannot modify, let's call it IBaseType for example

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

Our goal is to define a custom type, IGoalType, which not only extends IBaseType but also change the type of a, b & c to Object (for example). To make this, we'll need a third (yes this is not a clean solution) interface to act as "bridge"

interace IBridge extends IBaseType {
  a: any
  b: any
  c: any
}

interface IGoalType extends IBridge {
  a: Object
  b: Object
  c: Object
}

Now, test it:

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

edited May 01 '16 at 19:39

answered May 01 '16 at 18:22

Manu Artero

9,238
6
58
73

Yes, i know, but in this case I have to copypaste the list of keys. If the are will be some new elements i will have to copypaste them to. It would be good if i could use React's `d.ts` just to be up to date. Maybe it is possible to infer type somehow, i.e. if i map an array TypeScript will understand that it's type has been changed. – aspirisen May 01 '16 at 18:29
What if you extends that react.d.ts type? Interface A extends React.Type – Manu Artero May 01 '16 at 18:33
yes i can extend and add new elements but what to do with the base elements, how to change their type? In general my motivation to do that is the following: React's elements accept some attributes like `style, id, className` and so on. I need to make all of the React DOM elements to accept some my attributes. Now it works like i map all the `React.DOM` element with my function which do some stuf and than call original React's function, it works in JS but in TypeScript i don't know how to assign types to them. Now it is copypaste from the `d.ts`. – aspirisen May 01 '16 at 18:44
For simple solution see answer here: https://stackoverflow.com/questions/41285211/overriding-interface-property-type-defined-in-typescript-d-ts-file – justdvl Oct 12 '21 at 19:07

Typescript: change type of object member

1 Answers1