In TypeScript, interfaces are a powerful tool used to define the shape of an object. They enforce type-checking, making sure that the objects you create adhere to a specific structure. Here's a look at various cases where interfaces are commonly used, along with examples:
1. Defining Object Shape
Interfaces are often used to define the structure of an object. This ensures that any object adhering to the interface will have specific properties.
interface User {
name: string;
age: number;
email: string;
}
const user: User = {
name: "John Doe",
age: 30,
email: "john.doe@example.com"
};
2. Optional Properties
Interfaces allow you to define optional properties using the ? symbol. This means that the object may or may not have those properties.
interface Product {
id: number;
name: string;
description?: string; // Optional property
}
const product: Product = {
id: 1,
name: "Laptop"
};
3. Readonly Properties
You can define properties as readonly, meaning they cannot be changed after being initialized.
interface Config {
readonly apiUrl: string;
timeout: number;
}
const config: Config = {
apiUrl: "https://api.example.com",
timeout: 5000
};
// config.apiUrl = "https://newapi.example.com"; // Error: Cannot assign to 'apiUrl' because it is a read-only property.
4. Function Types
Interfaces can be used to define the shape of functions, specifying the parameter types and return type.
interface Login {
(username: string, password: string): boolean;
}
const login: Login = (username, password) => {
return username === "admin" && password === "admin123";
};
console.log(login("admin", "admin123")); // true
5. Extending Interfaces
Interfaces can extend other interfaces, allowing for the creation of complex types by combining existing ones.
interface Person {
name: string;
age: number;
}
interface Employee extends Person {
employeeId: number;
department: string;
}
const employee: Employee = {
name: "Alice",
age: 28,
employeeId: 12345,
department: "Engineering"
};
6. Implementing Interfaces in Classes
Classes can implement interfaces, ensuring that they adhere to the interface's structure.
interface Animal {
name: string;
makeSound(): void;
}
class Dog implements Animal {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound() {
console.log("Woof! Woof!");
}
}
const dog = new Dog("Buddy");
dog.makeSound(); // Woof! Woof!
7. Indexable Types
Interfaces can describe objects that have properties with dynamic keys of a specific type.
interface StringArray {
[index: number]: string;
}
const myArray: StringArray = ["Hello", "World"];
console.log(myArray[0]); // Hello
8. Hybrid Types
Interfaces can define objects that act both as a function and as an object with properties.
interface Counter {
(start: number): void;
interval: number;
reset(): void;
}
const counter: Counter = (function (start: number) {
console.log("Counter started at", start);
} as Counter);
counter.interval = 1000;
counter.reset = () => {
console.log("Counter reset");
};
counter(10);
console.log(counter.interval); // 1000
counter.reset();
9. Interface Merging
TypeScript allows you to merge multiple declarations of the same interface, which is useful when working with large codebases or libraries.
interface Box {
height: number;
width: number;
}
interface Box {
color: string;
}
const myBox: Box = {
height: 20,
width: 15,
color: "blue"
};
Interfaces in TypeScript provide a flexible and powerful way to define and enforce object shapes, enabling strong type-checking and clear, maintainable code.
Top comments (0)