Unions & Type Aliases in TypeScript

Description

Unions

Unions are used to combine more than one data type to be used on a variable. This is how it is done;

// This can be used to declare multiple data types in a variable
let combined: (string | number)[] = [];
//When using unions on arrays, it needs to be enclosed in parenthesis.

combined.push('hello', 2);
console.log(combined); //result will be an array with 2 items: hello and 2.

//union type on variables
let uid: string | number; //this means the uid variable can either be a string or a number
uid = 'me'; 
uid = 1;
console.log(uid); //result will be 1.

Type Aliases

These are used to store type specifications, eg: union types, so that they can be reused to avoid repeating code.

//Without using type aliases;
const details = (uid: string | number, item: string) => {
    console.log(`${item} has a uid of ${uid}`)
}

const greet = (user: {name: string, uid: string | number}) => {
    console.log(`${user.name} says hello`);
}

//Using type aliases;
//type aliases can be made like this
type StringOrNumber = string | number;

const details = (uid: StringOrNumber, item: string) => {
    console.log(`${item} has a uid of ${uid}`)
}

const greet = (user: {name: string, uid: StringOrNumber}) => {
    console.log(`${user.name} says hello`);
}

//it can also be written for the object in the greet function like this;
type objWithName = { name: string, uid: StringOrNumber};

const greet = (user: objWithName) => {
    console.log(`${user.name} says hello`);
}