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 😃!