Propriétés optionnelles et Readonly
Fait partie de la section Introduction à TypeScript du Journey JavaScript de Coddy. Leçon 41 sur 73.
TypeScript fournit deux modificateurs puissants qui vous donnent ce contrôle : le modificateur de propriété optionnelle et le modificateur readonly.
Le symbole ? rend une propriété optionnelle, ce qui signifie qu'elle n'a pas besoin d'être présente lors de la création d'un objet. Ceci est utile pour les propriétés qui ne sont pas toujours nécessaires :
interface User {
name: string;
email?: string; // Propriété optionnelle
}
let user1: User = { name: "Alice" }; // Valide - l'email est optionnel
let user2: User = { name: "Bob", email: "bob@example.com" }; // Également valideLe modificateur readonly empêche la modification d'une propriété après la création de l'objet. C'est parfait pour les propriétés qui doivent rester constantes, comme les identifiants uniques :
interface Product {
readonly id: number; // Ne peut pas être modifié après la création
name: string;
}
let product: Product = { id: 1, name: "Laptop" };
product.name = "Gaming Laptop"; // Valide
// product.id = 2; // Erreur : Impossible d'assigner à 'id' car il est en lecture seuleVous pouvez combiner les deux modificateurs sur la même interface, et ces modificateurs fonctionnent de manière identique avec les interfaces et les alias de type, vous donnant un contrôle précis sur la structure de vos objets.
Défi
FacileCréez une interface nommée Book avec les propriétés suivantes :
titlede typestring(obligatoire)isbnde typestring(en lecture seule)subtitlede typestring(facultative)pagesde typenumber(obligatoire)publishedYearde typenumber(en lecture seule)genrede typestring(facultatif)
Créez une interface nommée Magazine avec les propriétés suivantes :
namede typestring(obligatoire)issueNumberde typenumber(en lecture seule)topicde typestring(facultatif)monthlySubscriptionde typeboolean(obligatoire)
À l’aide de vos interfaces, créez les variables suivantes :
- Créez une variable nommée
novelde typeBookavec le titre"1984", l’ISBN"978-0-452-28423-4",328pages et l’année de publication1949 - Créez une variable nommée
cookbookde typeBookavec le titre"The Joy of Cooking", l’ISBN"978-0-7432-4626-2", le sous-titre"All About Baking",1132pages, l’année de publication2006et le genre"Cooking" - Créez une variable nommée
techMagde typeMagazineavec le nom"Tech Today", le numéro45et un abonnement mensuel défini àtrue - Créez une variable nommée
scienceMagde typeMagazineavec le nom"Science Weekly", le numéro12, le sujet"Climate Change"et un abonnement mensuel défini àfalse
Créez une fonction nommée getBookDetails qui accepte un paramètre de type Book et renvoie une string. La fonction doit renvoyer le titre et le nombre de pages du livre au format "[title] - [pages] pages".
Créez une fonction nommée getMagazineInfo qui accepte un paramètre de type Magazine et renvoie une string. La fonction doit renvoyer le nom et le numéro du magazine au format "[name] Issue #[issueNumber]".
Affichez les résultats suivants sur des lignes séparées :
- Appelez
getBookDetailsavecnovelet affichez le résultat - Appelez
getBookDetailsaveccookbooket affichez le résultat - Appelez
getMagazineInfoavectechMaget affichez le résultat - Appelez
getMagazineInfoavecscienceMaget affichez le résultat - Affichez l’ISBN de
novel - Affichez le statut de l’abonnement de
techMag(la propriétémonthlySubscription)
Essayez vous-même
// À FAIRE : Écrivez votre code ici
// Créer l'interface Book
// Créer l'interface Magazine
// Créer les variables en utilisant vos interfaces
// Créer la fonction getBookDetails
// Créer la fonction getMagazineInfo
// 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