Maison > interface Web > js tutoriel > le corps du texte

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

王林
Libérer: 2024-08-18 00:03:36
original
373 Les gens l'ont consulté

Mastering TypeScript Interfaces: A Comprehensive Guide with Practical Examples

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"
};
Copier après la connexion

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"
};
Copier après la connexion

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.
Copier après la connexion

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
Copier après la connexion

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"
};
Copier après la connexion

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!
Copier après la connexion

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
Copier après la connexion

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();
Copier après la connexion

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"
};
Copier après la connexion

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal