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:
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: "[email protected]" };
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" };
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.
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
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" };
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!
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
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();
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.
Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.
Copyright© 2022 湘ICP备2022001581号-3