Mastering TypeScript Interfaces: A Comprehensive Guide with Practical Examples

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.

The above is the detailed content of Mastering TypeScript Interfaces: A Comprehensive Guide with Practical Examples. For more information, please follow other related articles on the PHP Chinese website!