To reuse union types 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
// 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,
// 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.
// 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,
// 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,
// 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,
// 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.
That's all 😃!