How to make a type alias that changes type according to generic parameter type in TypeScript?

Originally posted here!

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.

Feel free to share if you found this useful 😃.