TypeScript Interface Inheritance: A Beginner’s Guide
TypeScript interfaces are a powerful tool for defining the shape of objects. They act like contracts, specifying the properties and methods that an object must have. Interface inheritance builds on this concept, allowing you to create new interfaces based on existing ones, promoting code reuse and reducing redundancy. This guide will walk you through the basics of interface inheritance in TypeScript, with clear explanations and practical examples.
1. What is Interface Inheritance?
Interface inheritance is the ability to create a new interface that inherits properties and methods from one or more existing interfaces. The new interface (the derived or child interface) automatically gains all the members of the interface(s) it extends (the base or parent interface(s)). The derived interface can then add its own unique members, or even override existing ones (with some caveats, explained later).
This is analogous to class inheritance in object-oriented programming, but specifically focuses on the structure and type of objects, rather than implementation details.
2. The extends Keyword
TypeScript uses the extends keyword to implement interface inheritance. The syntax is straightforward:
“`typescript
interface BaseInterface {
property1: string;
method1(): void;
}
interface DerivedInterface extends BaseInterface {
property2: number;
method2(): boolean;
}
“`
In this example, DerivedInterface extends BaseInterface. This means DerivedInterface automatically includes property1 (a string) and method1 (which returns nothing – void). It then adds its own members: property2 (a number) and method2 (which returns a boolean).
3. Multiple Inheritance (Interface Merging)
TypeScript supports multiple inheritance for interfaces. This means an interface can extend multiple base interfaces. This is a significant advantage over many languages that only allow single inheritance for classes.
“`typescript
interface Printable {
print(): void;
}
interface Loggable {
log(message: string): void;
}
interface PrintableAndLoggable extends Printable, Loggable {
id: number;
}
let myObject: PrintableAndLoggable = {
id: 123,
print: () => { console.log(“Printing…”); },
log: (message) => { console.log(“Log:”, message); }
};
myObject.print(); // Outputs: Printing…
myObject.log(“Hello”); // Outputs: Log: Hello
console.log(myObject.id); // Outputs: 123
“`
Here, PrintableAndLoggable inherits from both Printable and Loggable, acquiring the print and log methods. It then adds its own id property. Any object conforming to PrintableAndLoggable must implement all three members.
4. Overriding Members (Careful!)
While you can define a member in a derived interface with the same name as a member in a base interface, the types must be compatible. This is different from class inheritance where methods can be overridden with different signatures. With interface inheritance, it’s more about extending and refining the type, not replacing it wholesale.
“`typescript
interface Animal {
name: string;
makeSound(): string;
}
interface Dog extends Animal {
// name: number; // ERROR: Type ‘number’ is not assignable to type ‘string’.
makeSound(): string; // This is fine, the types are the same.
breed: string;
}
“`
In this example, attempting to override name with a number type in the Dog interface will result in a compile-time error. The makeSound method is fine because it maintains the same return type (string).
If the return type of the method is different, you can create a subtype of the original return type. This maintains compatibility:
“`typescript
interface Animal {
name: string;
makeSound(): string;
}
interface Dog extends Animal {
makeSound(): “Woof!” | “Bark!”; // “Woof!” | “Bark!” is a subtype of string.
breed: string;
}
let myDog: Dog = {
name: “Fido”,
makeSound: () => “Woof!”, // Valid
breed: “Golden Retriever”
};
“`
Here, "Woof!" | "Bark!" is a string literal union type. It’s a subtype of string because any value that is "Woof!" or "Bark!" is also a string.
5. Interface Merging (Declaration Merging)
TypeScript has a powerful feature called declaration merging. This means that if you define the same interface multiple times, TypeScript will merge the declarations into a single definition. This also applies to inherited interfaces.
“`typescript
interface Box {
height: number;
width: number;
}
interface Box { // Merges with the previous definition
scale: number;
}
//Equivalent to
// interface Box {
// height: number;
// width: number;
// scale: number
// }
let box: Box = { height: 10, width: 20, scale: 2 };
“`
This can be very useful for extending interfaces defined in third-party libraries without modifying the original source code. It’s important to note that if you declare conflicting types for the same property in different declarations, you’ll get a compile-time error.
6. Benefits of Interface Inheritance
- Code Reusability: Avoid repeating the same property and method definitions in multiple interfaces.
- Maintainability: Changes to a base interface are automatically reflected in derived interfaces, reducing the risk of inconsistencies.
- Readability: Makes your code more organized and easier to understand by clearly showing the relationships between different interfaces.
- Type Safety: Ensures that objects conforming to derived interfaces also satisfy the requirements of the base interfaces.
- Extensibility: Easily extend existing interfaces to create more specialized types without modifying the original definitions.
7. Practical Example: User and Admin Interfaces
Let’s see a more complete example demonstrating the practical use of interface inheritance:
“`typescript
interface User {
id: number;
username: string;
email: string;
}
interface Admin extends User {
permissions: string[];
manageUsers(): void;
}
let regularUser: User = {
id: 1,
username: “johndoe”,
email: “[email protected]”
};
let adminUser: Admin = {
id: 2,
username: “adminuser”,
email: “[email protected]”,
permissions: [“create”, “read”, “update”, “delete”],
manageUsers: () => { console.log(“Managing users…”); }
};
// regularUser.manageUsers(); // ERROR: Property ‘manageUsers’ does not exist on type ‘User’.
adminUser.manageUsers(); // Outputs: Managing users…
console.log(adminUser.permissions); // Outputs: [“create”, “read”, “update”, “delete”]
“`
In this scenario, the Admin interface inherits all the properties of the User interface (id, username, email) and adds its own specific properties (permissions, manageUsers). This clearly models the relationship between users and administrators, while maintaining type safety and avoiding code duplication.
8. Conclusion
Interface inheritance is a fundamental concept in TypeScript that allows you to create well-structured, maintainable, and type-safe code. By leveraging the extends keyword and understanding the principles of interface merging and type compatibility, you can build complex and robust type definitions for your applications. Remember to use inheritance strategically to promote code reuse, improve readability, and enforce strong type checking. This guide provides a solid foundation for understanding and effectively utilizing interface inheritance in your TypeScript projects.