Menu
Coddy logo textTech

Étendre les interfaces et les types

Fait partie de la section Introduction à TypeScript du Journey JavaScript de Coddy. Leçon 42 sur 73.

Au lieu de dupliquer le code, TypeScript fournit des mécanismes puissants pour construire de nouveaux types basés sur des types existants par l'intermédiaire de l'héritage.

Pour les interfaces, vous pouvez utiliser le mot-clé extends pour créer une nouvelle interface qui hérite de toutes les propriétés d’une interface de base :

interface Vehicle {
  brand: string;
  year: number;
}

interface Car extends Vehicle {
  doors: number;
}

// Car now has: brand, year, and doors

Pour les alias de type, vous obtenez le même résultat en utilisant des types d'intersection avec l'opérateur & :

type Vehicle = {
  brand: string;
  year: number;
};

type Car = Vehicle & {
  doors: number;
};

// Car possède les mêmes propriétés que l'exemple d'interface

Les deux approches créent de nouveaux types qui contiennent toutes les propriétés du type de base, plus toutes les propriétés supplémentaires que vous définissez. Cela favorise la réutilisabilité du code et aide à maintenir la cohérence entre les types associés dans votre application.

challenge icon

Défi

Facile

Créez une interface de base nommée Employee avec les propriétés suivantes :

  • id de type number
  • name de type string
  • department de type string

Créez une interface nommée Manager qui étend Employee et ajoute les propriétés suivantes :

  • teamSize de type number
  • budget de type number

Créez un alias de type nommé Contact avec les propriétés suivantes :

  • email de type string
  • phone de type string

Créez un alias de type nommé Developer à l’aide de types d’intersection qui combine Employee et Contact, et ajoute les propriétés suivantes :

  • programmingLanguages de type string[]
  • yearsExperience de type number

À l’aide de vos interfaces et de vos types, créez les variables suivantes :

  • Créez une variable nommée teamLead de type Manager avec l’identifiant 101, le nom "Alice Johnson", le service "Engineering", une taille d’équipe de 8 et un budget de 250000
  • Créez une variable nommée softwareDev de type Developer avec l’identifiant 102, le nom "Bob Smith", le service "Engineering", l’adresse e-mail "bob.smith@company.com", le téléphone "555-0123", les langages de programmation ["TypeScript", "Python", "Java"] et 5 années d’expérience

Créez une fonction nommée getManagerSummary qui accepte un paramètre de type Manager et renvoie une string au format "[name] manages [teamSize] people with a budget of $[budget]".

Créez une fonction nommée getDeveloperSkills qui accepte un paramètre de type Developer et renvoie une string au format "[name] knows [programmingLanguages joined with ', '] ([yearsExperience] years experience)".

Affichez les résultats suivants sur des lignes distinctes :

  • Appelez getManagerSummary avec teamLead et affichez le résultat
  • Appelez getDeveloperSkills avec softwareDev et affichez le résultat
  • Affichez le service de teamLead
  • Affichez l’adresse e-mail de softwareDev

Essayez vous-même

// TODO: Écrivez votre code ici

// Créer l'interface Employee

// Créer l'interface Manager qui étend Employee

// Créer l'alias de type Contact

// Créer l'alias de type Developer en utilisant les types d'intersection

// Créer la variable teamLead de type Manager

// Créer la variable softwareDev de type Developer

// Créer la fonction getManagerSummary

// Créer la fonction getDeveloperSkills

// Afficher les sorties requises
quiz iconTestez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Toutes les leçons de Introduction à TypeScript

Entraînez-vous par vous-même : Compilateur JavaScript en ligne