TypeScript Interface vs Type Differences Explained with Examples

If you're just starting with TypeScript, you might be confused about when to use an interface vs a type alias. Both are used to describe the shape of data, objects, or function signatures in your code. Understanding their differences helps you write clearer and more maintainable TypeScript code. This article breaks down the differences in simple terms, with examples you can follow along to grasp the concepts quickly.

An interface in TypeScript allows you to define the structure of an object or function, focusing mainly on the shape of data. It is extendable and can be merged, which means you can add new properties to an interface even after it's initially declared. On the other hand, a type alias can define not just object shapes but also unions, intersections, primitives, or any other types. Type aliases are more flexible but do not support declaration merging like interfaces. Both play a big role in how you manage types in TypeScript, and are often used alongside other concepts like enums and generics.

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

// You can extend interfaces
interface ExtendedUserInterface extends UserInterface {
  email: string;
}

// Type alias for an object
type UserType = {
  name: string;
  age: number;
};

// Type aliases can also create unions
type Status = "active" | "inactive" | "pending";

// Example usage
const user1: UserInterface = { name: "Alice", age: 25 };
const user2: UserType = { name: "Bob", age: 30 };
const currentStatus: Status = "active";

To use interface or type properly, consider the scenario first. Use interface when you need to define a contract for objects and want to take advantage of declaration merging or extendability. Interfaces are great for defining object shapes and working with classes. Use type alias when you want to define more complex types such as unions, tuples, or primitives. Also, type aliases are powerful when combining types using intersections or unions. Remember, interfaces can only describe object shapes, but type aliases can describe almost any type, which gives you more flexibility in advanced type manipulations.

A common mistake beginner TypeScript developers make is assuming interfaces and types are interchangeable, which might lead to confusion when trying to extend or merge them. For example, trying to declare merge with type aliases causes errors because type aliases do not merge. Another frequent error is overly complex type aliases that hurt readability. Also, misuse of type unions when an interface inheritance would be clearer can complicate your code. It’s a good practice to keep your types and interfaces simple and meaningful, and leverage other TypeScript concepts like generics and utility types to manage complexity.

In summary, interfaces and type aliases in TypeScript both define types but serve slightly different purposes. Interfaces are best suited for defining the shape of objects, especially when you want to extend or merge them later. Type aliases provide more flexibility by allowing you to represent unions, intersections, primitives, and tuples, which interfaces cannot directly express. Understanding these differences along with how they relate to other TypeScript concepts like generics and enums will make your TypeScript coding much easier and your types more robust.