This site uses tracking technologies. You may opt in or opt out of the use of these technologies.

Back to Typescript

Typescript Interfaces and Type Aliases

In TypeScript, interfaces and type aliases are two ways to define the shape of an object, but they have some differences and specific use cases.

In TypeScript, interfaces and type aliases are two ways to define the shape of an object, but they have some differences and specific use cases. Here’s a breakdown to help you understand when to use each.

1. Basic Differences

FeatureInterfaceType Alias
Declarationinterface Person { name: string; }type Person = { name: string; }
ExtensionExtendable through extendsExtendable through intersections (&)
Merging CapabilitiesMultiple declarations mergeCannot be merged
Primitives & UnionsOnly for objects or functionsCan represent any type, including primitives, unions, etc.

2. When to Use Interfaces

Use interfaces when:

  • You’re defining the shape of an object or class.

  • You need to extend multiple interfaces or allow multiple implementations.

  • You want to take advantage of declaration merging, where multiple interface declarations with the same name automatically merge into one.

interface Person {
name: string;
age: number;
}
interface Employee extends Person {
employeeId: number;
}
const person: Person = { name: "Amir", age: 30 };
const employee: Employee = { name: "Niyoorani", age: 9, employeeId: 123 };

Declaration Merging

In TypeScript, declaration merging allows you to define multiple interface declarations with the same name, and TypeScript will automatically merge them into a single interface. This is particularly useful for extending existing types or when you want to add more properties to an interface across different parts of your codebase.

Here’s a simple example:

// First declaration of the Person interface
interface Person {
name: string;
}
// Second declaration of the Person interface
interface Person {
age: number;
}
// Now, the Person interface includes both properties: name and age.
const person: Person = {
name: "Amir",
age: 30
};
console.log(person.name); // Output: Amir
console.log(person.age); // Output: 30

In this example, TypeScript merges the two Person interfaces, so Person now has both name and age properties. You can add declarations in different files (as long as they’re in the same module or imported) and TypeScript will still merge them.

This feature is unique to interfaces—type aliases do not support declaration merging.

3. When to Use Type Aliases

Use type aliases when:

  • You want to define a union or tuple type.

  • You need to create more complex types that may include primitives, functions, or intersections.

  • You are creating a type that doesn’t need to support merging or extension.

    Example:

type Name = string;
type Age = number;
type Person = { name: Name; age: Age };
type Employee = Person & { employeeId: number }; // Intersection type
type Status = "active" | "inactive"; // Union type
const status: Status = "active";
const employee: Employee = { name: "Amir", age: 30, employeeId: 123 };

4. Key Differences in Practice

  • Declaration Merging: If you need to add properties to an existing structure from different files, interfaces are better, as they merge declarations automatically.

  • Union Types: Only type aliases can define union types or tuples, so they are the best choice for creating unions.

Summary

  • Use interfaces for defining the structure of objects, especially when they need to be extended or merged.

  • Use type aliases for union types, primitives, tuples, and when defining types for specific values or functions.