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
Feature | Interface | Type Alias |
---|---|---|
Declaration | interface Person { name: string; } | type Person = { name: string; } |
Extension | Extendable through extends | Extendable through intersections (&) |
Merging Capabilities | Multiple declarations merge | Cannot be merged |
Primitives & Unions | Only for objects or functions | Can 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 interfaceinterface Person {name: string;}// Second declaration of the Person interfaceinterface 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: Amirconsole.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 typetype Status = "active" | "inactive"; // Union typeconst 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.