DEV Community

Discussion on: Use TypeScript Generics to enhance your React components and make them reusable

Collapse
 
nitsancohen770 profile image
Nitsan Cohen

Isn't the example above obvious enough?
We receive a data prop, and we want to have it typed to receive all the benefits of typescript(auto-completion, etc.). If we hardcode the data, we limit our component to only one data structure. Using generics allows users to install our component and use any data structure they prefer.

Collapse
 
fjones profile image
FJones • Edited
  1. Auto-completion is not a TypeScript feature. TS can help, but most of the auto-completion relevant for components isn't really helped by a generic component. Especially if you're just establishing a data prop.
  2. The code has so many flaws despite TypeScript, it's difficult to see how generics could help:
    1. Assuming data is an array of objects without mandating that.
    2. Getting the keys only from the first item of that array...
    3. ... but somehow assuming the key needs an explicit toString call and the value is renderable.
  3. The benefits of generics aren't actually shown here either. In fact, even the example at the end doesn't actually use a typed instance of the generic component.

Generics can be useful, if you're mandating a relationship between the types of different arguments/props. For example, say, mandating a { data: T[], render: (T) => Element } prop list.

Thread Thread
 
nitsancohen770 profile image
Nitsan Cohen • Edited

Not going to answer all your comments, but regarding your claim that I am not using a typed instance, please read about Type Inference:

typescriptlang.org/docs/handbook/t...

Collapse
 
ayrbox profile image
ayrbox

I agree with you that typescript gives more benefit but at the time if writing GenericComponent data type is still unknonwn and at line 14 you are assuming that value is of type string. Besides saying that your technique is extremely use full if you are passing rendering list as child function. You can pass the data into rendering function where you will have all goodness of typescript (intellisense, compile time check and so on).

Hope its clear, let me know if you need an example.

Thread Thread
 
nitsancohen770 profile image
Nitsan Cohen

I am not sure I fully understood, please share your example. Thanks!