To make a type alias
that changes the type according to the generic parameter, we can use the angled brackets symbol (<>
) after the type alias name and inside the brackets symbol, we can write any name for the generic parameter. At last, inside the type declaration body, we can use the generic parameter name we defined wherever we need to use it as a general or generic type.
TL;DR
// A generic type alias
// with generic parameter called `Type`
type Books<Type> = {
contents: Type;
};
// creating an object using the
// generic type alias `Books` and passing `string`
// as the generic parameter type
const book: Books<string> = {
contents: "Hello World", // <-- the `contents` property now only accepts value of `string` type
};
// creating an object using the
// generic type alias `Books` and passing `number`
// as the generic parameter type
const book2: Books<number> = {
contents: 12345, // <-- the `contents` property now only accepts value of `number` type
};
To understand it a little more clearly, let's consider a type alias
called Books
like this,
// Books type alias
type Books = {
// type declaration here
};
Now let's declare a propety called contents
and give it a type of string
like this,
// Books type alias
// where `contents` property
// is of type `string`
type Books = {
contents: string;
};
Now we have a type alias called Books
where the contents
should be of string
type only. This is fine.
But what if we need the contents
property to be of type number
for another kind of Book
.
So you may think of writing one more type alias called Books2
where the contents
property is of number
type like this,
// Books type alias
// where `contents` property
// is of type `string`
type Books = {
contents: string;
};
// Books2 type alias
// where `contents` property
// is of type `number`
type Books2 = {
contents: string;
};
Now looking at the above 2 type alias
, I believe you got the problem. Even though we have similar kinds of type alias
, the only thing that got changed is the contents
property's type.
This is not a good and scalable way of achieving the solution.
This is where the concept of generic type alias
comes into play.
A Generic type alias
is written by first writing the generic parameter name in between the angled brackets (<>
) after the type alias name and then using the generic type wherever we need to use it inside the type declaration body of the type alias.
It can be done like this,
// A generic type alias
// with generic parameter called `Type`
type Books<Type> = {
contents: Type;
};
Now when using the Books
type alias
as the type for any objects we can pass the type we need to use at that time by passing it inside the angled brackets symbol (<>
) like this,
// A generic type alias
// with generic parameter called `Type`
type Books<Type> = {
contents: Type;
};
// creating an object using the
// generic type alias `Books` and passing `string`
// as the generic parameter type
const book: Books<string> = {
contents: "Hello World", // <-- the `contents` property now only accepts value of `string` type
};
// creating an object using the
// generic type alias `Books` and passing `number`
// as the generic parameter type
const book2: Books<number> = {
contents: 12345, // <-- the `contents` property now only accepts value of `number` type
};
As you can see from the above code we have made 2 objects called book
and book2
and used the same generic type alias
called Books
and passed different types as the generic type and was able to reuse the type alias.
We have successfully made a generic type alias
. Yay 🥳!
See the above code live in codesandbox.