Menu
Coddy logo textTech

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 valide

Le 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 seule

Vous 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.

challenge icon

Défi

Facile

Créez une interface nommée Book avec les propriétés suivantes :

  • title de type string (obligatoire)
  • isbn de type string (en lecture seule)
  • subtitle de type string (facultative)
  • pages de type number (obligatoire)
  • publishedYear de type number (en lecture seule)
  • genre de type string (facultatif)

Créez une interface nommée Magazine avec les propriétés suivantes :

  • name de type string (obligatoire)
  • issueNumber de type number (en lecture seule)
  • topic de type string (facultatif)
  • monthlySubscription de type boolean (obligatoire)

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

  • Créez une variable nommée novel de type Book avec le titre "1984", l’ISBN "978-0-452-28423-4", 328 pages et l’année de publication 1949
  • Créez une variable nommée cookbook de type Book avec le titre "The Joy of Cooking", l’ISBN "978-0-7432-4626-2", le sous-titre "All About Baking", 1132 pages, l’année de publication 2006 et le genre "Cooking"
  • Créez une variable nommée techMag de type Magazine avec le nom "Tech Today", le numéro 45 et un abonnement mensuel défini à true
  • Créez une variable nommée scienceMag de type Magazine avec le nom "Science Weekly", le numéro 12, 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 getBookDetails avec novel et affichez le résultat
  • Appelez getBookDetails avec cookbook et affichez le résultat
  • Appelez getMagazineInfo avec techMag et affichez le résultat
  • Appelez getMagazineInfo avec scienceMag et 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 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