"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > Mastering TypeScript Interfaces: A Comprehensive Guide with Practical Examples

Mastering TypeScript Interfaces: A Comprehensive Guide with Practical Examples

Published on 2024-08-18
Browse:215

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: "[email protected]"
};

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.

Release Statement This article is reproduced at: https://dev.to/shanu001x/mastering-typescript-interfaces-a-comprehensive-guide-with-practical-examples-m8h?1 If there is any infringement, please contact [email protected] to delete it
Latest tutorial More>

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