É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 doorsPour 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'interfaceLes 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.
Défi
FacileCréez une interface de base nommée Employee avec les propriétés suivantes :
idde typenumbernamede typestringdepartmentde typestring
Créez une interface nommée Manager qui étend Employee et ajoute les propriétés suivantes :
teamSizede typenumberbudgetde typenumber
Créez un alias de type nommé Contact avec les propriétés suivantes :
emailde typestringphonede typestring
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 :
programmingLanguagesde typestring[]yearsExperiencede typenumber
À l’aide de vos interfaces et de vos types, créez les variables suivantes :
- Créez une variable nommée
teamLeadde typeManageravec l’identifiant101, le nom"Alice Johnson", le service"Engineering", une taille d’équipe de8et un budget de250000 - Créez une variable nommée
softwareDevde typeDeveloperavec l’identifiant102, 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"]et5anné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
getManagerSummaryavecteamLeadet affichez le résultat - Appelez
getDeveloperSkillsavecsoftwareDevet 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 requisesCette 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
1Premiers pas avec TS
Qu'est-ce que TypeScript ?Pourquoi utiliser TypeScript ?Votre premier code TypeScriptProcessus de compilation et erreursRécapitulatif : Introduction à TS4Travailler avec les fonctions
Typage des paramètres et valeurs de retourTypage des fonctions fléchéesLe type de retour 'void'Paramètres optionnels avec '?'Valeurs par défaut des paramètresTypage des paramètres RestDéfinir des types de fonctionsRécapitulatif : Créer des fonctions typées2Types fondamentaux
Types de base : str, num, booleanLe type 'any' : la porte de sortieLe type 'unknown'Travailler avec 'null' et 'undef'L'inférence de type en actionAnnotations de type explicitesRécapitulatif : Pratique des types fondamentaux5Types : Alias, Unions & Intersections
Alias de types pour les primitifsTypes d'union ('|')Travailler avec les types d'unionTypes littérauxTypes d'intersection ('&')Combiner des alias de typesRécapitulatif : Combinaisons de types avancées3Structure de données : Tableaux et Tuples
Tableaux typésModificateur 'readonly' pour les tableauxQu'est-ce qu'un tuple ?Déclaration et accès aux tuplesDéstructuration de tuplesTuples readonlyTableaux typés multidimensionnelsSpread operator avec les tableauxRécapitulatif : Tableaux et tuples6Typage des objets et interfaces
Annotations de type d'objet en ligneAlias de type pour les objetsIntroduction aux interfacesInterfaces vs Alias de typePropriétés optionnelles et ReadonlyÉtendre les interfaces et les typesAjout de méthodes aux interfacesRécapitulatif : Définir la structure des objetsEntraînez-vous par vous-même : Compilateur JavaScript en ligne