Day 4: Type Aliases vs Interfaces in TypeScript – Which Should You Use?

Welcome to Day 4 of your TypeScript journey! Over the past few days, we’ve covered basic types, type annotations, and type inference. Today, we’re diving into a topic that often sparks debate among TypeScript developers: Type Aliases vs Interfaces. Both are used to define custom types, but they have subtle differences that can impact how you structure your code. Let’s break it down in a simple, beginner-friendly way.

---

Why Type Aliases and Interfaces Matter

As your TypeScript projects grow, you’ll often need to define custom types for objects, functions, or complex data structures. Type aliases and interfaces are two tools that help you do this. They make your code more readable, reusable, and maintainable. But when should you use one over the other? Let’s find out.

---

1. Type Aliases

Type aliases allow you to create a new name for a type. They can represent primitive types, unions, tuples, and even complex object structures.

Example: Defining a Type Alias

type User = {
    name: string;
    age: number;
};

const user: User = {
    name: "John",
    age: 30,
};

Here, we’ve created a User type alias that describes an object with name and age properties.

Example: Union Types with Type Aliases

type ID = string | number;

const userId: ID = "abc123";
const postId: ID = 456;

In this example, ID can be either a string or a number.

Key Features of Type Aliases:

• Can represent primitive types, unions, intersections, and tuples.

• Are flexible and versatile.

• Cannot be extended or implemented directly (unlike interfaces).

---

2. Interfaces

Interfaces are used to define the shape of an object. They are particularly useful for defining contracts (e.g., what properties and methods an object must have).

Example: Defining an Interface

interface User {
    name: string;
    age: number;
}

const user: User = {
    name: "John",
    age: 30,
};

This looks similar to the type alias example, but interfaces have some unique features.

Example: Extending Interfaces

interface Person {
    name: string;
}

interface Employee extends Person {
    employeeId: number;
}

const employee: Employee = {
    name: "Alice",
    employeeId: 123,
};

Here, Employee extends Person, inheriting its properties.

Key Features of Interfaces:

• Are ideal for defining object shapes.

• Can be extended or merged (using declaration merging).

• Are commonly used in object-oriented programming.

---

Type Aliases vs Interfaces: Key Differences

Now that we’ve seen both in action, let’s compare them side by side:

---

When to Use Type Aliases

1. For Unions and Intersections:

    type Result = "success" | "failure";
    type Coordinates = { x: number } & { y: number };
   

2. For Tuples:

    type Point = [number, number];
   

3. For Complex Types:

    type Callback = (data: string) => void;
   

4. When You Need Flexibility:
   Type aliases are more versatile and can represent a wider range of types.

---

When to Use Interfaces

1. For Object Shapes:

    interface User {
        name: string;
        age: number;
    }
   

2. For Extending Types:

    interface Animal {
        name: string;
    }
   
    interface Dog extends Animal {
        breed: string;
    }
   

3. For Declaration Merging:

    interface Window {
        title: string;
    }
   
    interface Window {
        isMaximized: boolean;
    }
   
    const window: Window = {
        title: "My App",
        isMaximized: false,
    };
   

4. In Object-Oriented Code:
   Interfaces are a natural fit for defining class contracts.

---

Which Should You Use?

The choice between type aliases and interfaces often comes down to personal preference and the specific use case. Here’s a simple rule of thumb:

• Use type aliases for unions, intersections, and complex types.

• Use interfaces for object shapes and when you need extensibility.

In practice, many developers use both interchangeably for object shapes, but understanding their differences helps you make informed decisions.

---

Putting It All Together

Here’s an example that combines type aliases and interfaces:

// Type alias for a union type
type ID = string | number;

// Interface for a user object
interface User {
    id: ID;
    name: string;
    age: number;
}

// Type alias for a function type
type GreetFunction = (user: User) => string;

// Function using the type alias
const greet: GreetFunction = (user) => {
    return `Hello, ${user.name}!`;
};

const user: User = {
    id: "abc123",
    name: "John",
    age: 30,
};

console.log(greet(user)); // Output: Hello, John!

---

Conclusion

Type aliases and interfaces are both powerful tools in TypeScript, each with its own strengths. By understanding their differences and use cases, you can write cleaner, more maintainable code. Whether you prefer type aliases for their flexibility or interfaces for their extensibility, the choice is yours!

On Day 5, we’ll explore Union and Intersection Types in TypeScript. Stay tuned!