Type aliases

When learning TypeScript, you might need to work with lists of complex types that show similar characteristics. At some point, having to write out similar details for the same type can be a hassle. TypeScript's type aliases help with this by letting you replicate types. When you create a type alias, you're basically telling TypeScript to use the same characteristics for other types you link to this alias. Let's take a closer look at how this works.

Understanding type aliases

In TypeScript, a type alias is a way to create a new name for a type. That means, with a type alias, you don't create an entirely new, distinct type in TypeScript; instead, you give an existing type a descriptive name and customize its features to be used later in your code.

To declare a type alias in TypeScript, you can use the type keyword followed by the name you want to use for the type. After the equals (=) sign, you can specify what the type should be. Plus, using Pascal Case is a common convention to use when naming type aliases.

To start with a simple example:

type UserID = number;

Here, this line creates a type alias named UserID for the number type. With this declaration, you're essentially giving a new name, UserID, to the existing number type. This way, you are essentially telling TypeScript that "from now on UserID will be treated as a number, and any variable declared with the UserID type will be of type number".

let userId: UserID = 1023;

So, with this line, you use the alias you created by declaring a variable userId with a type of UserID, and assign it with the number 1023. In fact, this is effectively the same as writing let userId: number = 1023;. UserID is an alias for number, and this makes UserID a sort of synonym for number. Also, just like in type annotations, assigning a value to UserId other than the number type will definitely trigger a TypeScript error:

userId = "abc"; // This will result in a TypeScript error because "abc" is not a number.

Why type aliases matter

In the introduction, we mentioned that using type aliases would be handy when working with complex types in TypeScript. Here is a list of variables sharing the same structure of union type :

let userInput1 = number | string | boolean | null | undefined;
let userInput2 = number | string | boolean | null | undefined;
let userInput3 = number | string | boolean | null | undefined;

When you're required to work with such a union type across multiple variables, it can become a lengthy task. In this case, defining a type alias with the same union structure will make things easier:

type InputData = boolean | number | string | null | undefined;

let userInput1: InputData; // Represents user input from a form field
let userInput2: InputData; // Represents input from another form field
let userInput3: InputData; // Represents input from a third form field

In this code, creating a type alias called InputData will represent all the potential data types for this kind of user input. By doing this, we only need to define the union type (including boolean, number, string, null, and undefined) once, which simplifies the code and reduces the risk of type errors.

Further uses for type aliases

In TypeScript, you can handle way more complex tasks with flexibility. Let's have a look at some of them.

• Creating custom data structures, such as tuples or objects:

type PersonInfo = [string, number]; // A tuple type for person's name and age
const person: PersonInfo = ["John Doe", 25];

Here, the PersonInfo type is a tuple. Tuples are special arrays in TypeScript that have a fixed number of elements, and each element can have a specific data type. In this case, PersonInfo is a tuple with two elements: the first element is a string representing a person's name, and the second element is a number representing their age.

type CountryInfo = { // An object type for a person's country and language preferences
    region: string;
    languagePreferences: ('English' | 'Spanish' | 'French' | 'German')[];
};

Here, the CountryInfo type alias is used to specify the structure of an object. It describes that an object of type CountryInfo must have two properties: region, which has to be a string, and languagePreferences, which has to be an array containing specific language options.

• Defining function signatures.

Function signatures define the structure of a function in terms of the types of arguments it expects and the type of value it returns, without providing the function's actual implementation.

type GetPersonInfoFunction = (userId: string) => [PersonInfo, CountryInfo]; 

In the code line, above defines a type alias GetPersonInfoFunction for a function that takes a userId string as an argument and returns a tuple containing PersonInfo and CountryInfo. By this code, you may have also noticed that you can use one type alias to refer or include another type alias.

const getPersonInfo: GetPersonInfoFunction = (userId) => {
    // Use the userId to fetch or customize user information here.
    // For simplicity, we'll use default values in this example.
    let name = "Alice";
    let age = 30;
    let countryInfo: CountryInfo = {
        region: "USA",
        languagePreferences: ["English", "Spanish"]
    };
};

    return [[name, age], countryInfo];
}

To bring everything together, there's a function called getPersonInfo which takes the userId parameter and returns structured information about a person, including their name, age, and country details using type aliases.

Conclusion

Type aliases are a helpful feature in TypeScript for simplifying complex type declarations and improving code clarity in TypeScript. They enable us to give existing types new names, making our code more descriptive and minimizing redundancy. Type aliases can represent basic types like numbers or strings and define custom data structures like tuples or objects and even function signatures. We can use type aliases to simplify our code, improve its readability, and ensure that our data structures and functions follow our intended structure.