How to reuse union types on variables in TypeScript?
Tags: typescript
Published: 2021-09-23 00:00:00

---
  title: How to reuse union types on variables in TypeScript?
  published: true
  tags: TypeScript
  date: Thu Sep 23 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/reuse-union-types-on-variables-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-27ba0c19a473eb00dc8776e495dda8d0.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/reuse-union-types-on-variables-typescript)
  
To reuse [union types](https://melvingeorge.me/blog/set-more-than-one-type-variable-typescript) for variables, you can use the `Type Aliases` feature in TypeScript. A `Type Alias` can be written by using the `type` keyword followed by the name of the type you choose, then the `=` symbol (equal), and finally the type you want to resue.

### TL;DR

```ts
// Type alias for the union type
// composed of string type and the number type
type StringOrNumber = string | number;

// union type declaration
let age: StringOrNumber; // no type duplication here
let salary: StringOrNumber; // no type duplication here too

age = "30"; // string type value. This is allowed ✅
age = 20; // number type value. This is also allowed since we are using union type ✅
```

To understand it better, let's see a problem we might face while working with TypeScript.

For example, let's say we have a variable called `age` which can have values of either the `string` type or values of `number` type.

So let's make a union type composed of type `string` and type `number` like this,

```ts
// union type declaration
let age: string | number;
```

Since we are using a union type on the `age` variable we can assign the `string` type value of `30` or a `number` type value of `20` to the `age` variable and the TypeScript compiler will allow us to do that.

```ts
// union type declaration
let age: string | number;

age = "30"; // string type value. This is allowed ✅
age = 20; // number type value. This is also allowed since we are using union type ✅
```

Now, this is fine.

But what if have another variable called `salary` which can also accept both `string` and `number` values and need to have the same union type composed of `string` type and the `number` type like for the `age` variable like this,

```ts
// union type declaration
let age: string | number; // duplication of type 🥺
let salary: string | number; // duplication of type 🥺

age = "30"; // string type value. This is allowed ✅
age = 20; // number type value. This is also allowed since we are using union type ✅
```

As you can see that now we have a duplication of the same union type. So to avoid duplication of code in this scenario, we can use a TypeScript feature called `Type Aliases`.

In our case, we want to reuse the union type composed of the `string` type and the `number` type.

It can be done like this,

```ts
// Type alias for the union type
// composed of string type and the number type
type StringOrNumber = string | number;
```

Now we can replace the `string | number` from both the `age` and `salary` variable with the new `Type Alias` of `StringOrNumber`.

It can be done like this,

```ts
// Type alias for the union type
// composed of string type and the number type
type StringOrNumber = string | number;

// union type declaration
let age: StringOrNumber; // happiness 😍
let salary: StringOrNumber; // happiness overloaded 😍

age = "30"; // string type value. This is allowed ✅
age = 20; // number type value. This is also allowed since we are using union type ✅
```

As you can see from the above code that we have successfully removed the duplication of the union type and reused the new `Type Alias` in both the variables.

See the above code live in [codesandbox](https://codesandbox.io/s/reuse-union-types-on-variables-in-typescript-v9tsz?file=/src/index.ts).

That's all 😃!

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

---