Mastering TypeScript Interfaces: A Comprehensive Guide with Practical Examples-JS Tutorial-php.cn

Mastering TypeScript Interfaces: A Comprehensive Guide with Practical Examples

王林

Release： 2024-08-18 00:03:36

Original

218 people have browsed it

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"
};

Copy after login

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"
};

Copy after login

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.

Copy after login

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

Copy after login

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"
};

Copy after login

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!

Copy after login

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

Copy after login

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();

Copy after login

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"
};

Copy after login

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!