Maîtriser les interfaces TypeScript : un guide complet avec des exemples pratiques

Dans TypeScript, les interfaces sont un outil puissant utilisé pour définir la forme d'un objet. Ils appliquent la vérification de type, garantissant que les objets que vous créez adhèrent à une structure spécifique. Voici un aperçu de différents cas où les interfaces sont couramment utilisées, ainsi que des exemples :

1. Définir la forme de l'objet

Les interfaces sont souvent utilisées pour définir la structure d'un objet. Cela garantit que tout objet adhérant à l'interface aura des propriétés spécifiques.

interface User {
  name: string;
  age: number;
  email: string;
}

const user: User = {
  name: "John Doe",
  age: 30,
  email: "john.doe@example.com"
};

2. Propriétés facultatives

Les interfaces vous permettent de définir des propriétés facultatives à l'aide du ? symbole. Cela signifie que l'objet peut ou non avoir ces propriétés.

interface Product {
  id: number;
  name: string;
  description?: string; // Optional property
}

const product: Product = {
  id: 1,
  name: "Laptop"
};

3. Propriétés en lecture seule

Vous pouvez définir les propriétés en lecture seule, ce qui signifie qu'elles ne peuvent pas être modifiées après avoir été initialisées.

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. Types de fonctions

Les interfaces peuvent être utilisées pour définir la forme des fonctions, en spécifiant les types de paramètres et le type de retour.

interface Login {
  (username: string, password: string): boolean;
}

const login: Login = (username, password) => {
  return username === "admin" && password === "admin123";
};

console.log(login("admin", "admin123")); // true

5. Extension des interfaces

Les interfaces peuvent étendre d'autres interfaces, permettant la création de types complexes en combinant ceux existants.

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. Implémentation d'interfaces dans les classes

Les classes peuvent implémenter des interfaces, en veillant à ce qu'elles respectent la structure de l'interface.

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. Types indexables

Les interfaces peuvent décrire des objets qui ont des propriétés avec des clés dynamiques d'un type spécifique.

interface StringArray {
  [index: number]: string;
}

const myArray: StringArray = ["Hello", "World"];
console.log(myArray[0]); // Hello

8. Types hybrides

Les interfaces peuvent définir des objets qui agissent à la fois comme une fonction et comme un objet avec des propriétés.

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. Fusion d'interfaces

TypeScript vous permet de fusionner plusieurs déclarations de la même interface, ce qui est utile lorsque vous travaillez avec de grandes bases de code ou bibliothèques.

interface Box {
  height: number;
  width: number;
}

interface Box {
  color: string;
}

const myBox: Box = {
  height: 20,
  width: 15,
  color: "blue"
};

Les interfaces dans TypeScript offrent un moyen flexible et puissant de définir et d'appliquer des formes d'objet, permettant une vérification de type solide et un code clair et maintenable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!