Combining Type Aliases

Part of the Introduction To TypeScript section of Coddy's JavaScript journey — lesson 35 of 73.

One of the most powerful aspects of type aliases is their ability to be combined and reused to create more sophisticated type definitions. Instead of defining complex types from scratch each time, you can build them by composing smaller, focused type aliases together.

This approach promotes code reusability and makes your type definitions more maintainable. When you need to update a base type, all the composed types that use it automatically inherit the changes:

type Email = string;
type Phone = number;

type Contact = {
  name: string;
  email: Email;
  phone: Phone;
};

You can also combine type aliases within union types to create flexible data structures. This is particularly useful when an object property might accept different formats:

type ContactMethod = Email | Phone;

type User = {
  id: number;
  preferredContact: ContactMethod;
};

This compositional approach makes your code more expressive and easier to understand. Rather than seeing generic types like string or number, other developers immediately understand the intended purpose through meaningful type names like Email and Phone.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

Create a type alias named Username for the string type.

Create a type alias named UserAge for the number type.

Create a type alias named ContactMethod that combines Username and UserAge using a union type.

Create a type alias named UserProfile for an object with the following properties:

id of type number
displayName of type Username
preferredContact of type ContactMethod

Create a type alias named AdminProfile that combines UserProfile with an additional object type containing a permissions property of type string using intersection types.

Now create the following variables:

Create a variable named regularUser of type UserProfile with id 1, displayName "john_doe", and preferredContact "john_doe"
Create a variable named systemAdmin of type AdminProfile with id 2, displayName "admin", preferredContact 25, and permissions "full_access"

Create a function named getContactInfo that accepts a parameter called contact of type ContactMethod and returns a string. Use a type guard to check the type and return:

If it's a string: "Contact: [contact]"
If it's a number: "Age: [contact]"

Print the following outputs on separate lines:

Call getContactInfo with regularUser.preferredContact and print the result
Call getContactInfo with systemAdmin.preferredContact and print the result
Print systemAdmin.permissions

Cheat sheet

Type aliases can be combined and reused to create more sophisticated type definitions. This promotes code reusability and maintainability:

type Email = string;
type Phone = number;

type Contact = {
  name: string;
  email: Email;
  phone: Phone;
};

Combine type aliases within union types to create flexible data structures:

type ContactMethod = Email | Phone;

type User = {
  id: number;
  preferredContact: ContactMethod;
};

This compositional approach makes code more expressive and easier to understand by using meaningful type names instead of generic types like string or number.

Try it yourself

// TODO: Write your code here

// Create type aliases for Username, UserAge, ContactMethod, UserProfile, and AdminProfile

// Create variables regularUser and systemAdmin

// Create getContactInfo function

// Print the required outputs

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Combining Type Aliases

Cheat sheet

All lessons in Introduction To TypeScript