Reduce duplicate types with Generic Types
TypeScript allows us to create reusable types called Generics i.e. creating types that can work as a variety of types. Let's say that we have a Box type which can hold different types of content i.e.
type Box = {
name: string;
content: string;
}
In the above type, we can only store the content of the type string. Using generic types, we can modify our type as follows to allow storing different types of content.
type Box<T> = {
name: string;
content: T;
}
// It can now be used as follows to store contents of type
// string, number, boolean or any other type
type NumberBox = Box<number>;
type StringBox = Box<string>;
type BooleanBox = Box<boolean>;
In this lesson, we discuss how we can benefit from generic types to avoid duplicate types. You can also learn more about the Generic types in the TypeScript docs.
Instructor: ...we have a box type here with name and content. Content is of type string. Then we're using this box type for our string box variable, and we're assigning the name and content to this variable.
Let's say that we need another box which is going to hold numbers here. One way to do that is, copy this box and create a new type called Number Box, where content is of type number here. Then we can use this Number Box type for our variable numberBox, with a Number Box type. We can put the content as number.
Let's say that our application keeps growing. Now we need another box which is going to hold booleans instead of numbers. We can keep creating the copies of the box with the different types associated with the content. The issue with this approach is that we'll have a lot of box types here. Whenever we have change one box, we have to go through all the box types and update them all.
There are two ways to fix this issue of the duplicate types. One way would be to go with the Unknown type. We can remove this Number Box type from here and type the content as Unknown. We can use the same type box for the Number Box as well.
The only issue with that would be that, whenever we have to use some content, let's say that we have to console.log(String(box.content.TO"")), we have to put the type assertion because Unknown cannot be used without the type assertion. I have to do as string here. Same goes for the Number Box whenever we have to use this number from here. We have to put the type assertion as number.
The better way to fix this would be to go with the generic object type. We can pass it a parameter here. Box can expect the parameter of type T. Then we can use this type T for the Unknown here, I can put the T here.
Now we're getting the error whenever we are using the box type, "Generic type Box requires one type argument." To fix this issue, we have to pass string here. We also have to pass number here. Now, we can get rid of our type assertion from here and there is no error when we're using TO"" on our string box.
Same for our number box. If I put here number box.content, let's say multiply by 5, there is no error for that as well. We can also pass the default arguments to the generics. I can get rid of this string from here and I can make here equal to string. Now, if we don't pass the argument, it is going to be considered as a string here.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!