How to make a type alias that changes type according to generic parameter type in TypeScript?
Tags: typescript
Published: 2022-01-12 00:00:00

---
  title: How to make a type alias that changes type according to generic parameter type in TypeScript?
  published: true
  tags: TypeScript
  date: Wed Jan 12 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-generic-type-alias-that-change-type-according-to-generic-parameter-type-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-6335ef24a3b81edad63a92eb06df9bca.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-generic-type-alias-that-change-type-according-to-generic-parameter-type-typescript)
  
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

```ts
// 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,

```ts
// 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,

```ts
// 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,

```ts
// 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,

```ts
// 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,

```ts
// 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](https://codesandbox.io/s/make-generic-type-alias-that-change-type-according-to-generic-parameter-type-typescript-5n1et?file=/src/index.ts).

### Feel free to share if you found this useful 😃.

---