Optional and Readonly Properties
TypeScript interfaces allow you to control how objects are structured, but sometimes you need more flexibility or safety. Two useful features for this are optional properties and readonly properties. Optional properties are declared using a question mark (?) after the property name, indicating that the property may or may not be present on objects that implement the interface. Readonly properties use the readonly keyword to ensure that, once set, their value cannot be changed.
12345678910111213141516interface Product { readonly id: number; name: string; description?: string; } const book: Product = { id: 101, name: "TypeScript Handbook" }; const pen: Product = { id: 102, name: "Blue Pen", description: "A smooth-writing blue pen" };
In this example, the Product interface has a readonly id property, a required name property, and an optional description property. When you create a Product object, you must provide an id and name, but description is not required. If you try to assign a new value to id after the object is created, TypeScript will give you an error because id is marked as readonly. On the other hand, you can omit description entirely, or include it if you like. This makes your code safer—preventing accidental changes to properties that should never change—and more flexible, allowing objects to omit properties that are not always needed.
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Can you explain more about when to use optional vs readonly properties?
What happens if I try to change a readonly property in TypeScript?
Are there other ways to make properties optional or immutable in TypeScript?
Awesome!
Completion rate improved to 9.09Optional and Readonly Properties
Veeg om het menu te tonen
TypeScript interfaces allow you to control how objects are structured, but sometimes you need more flexibility or safety. Two useful features for this are optional properties and readonly properties. Optional properties are declared using a question mark (?) after the property name, indicating that the property may or may not be present on objects that implement the interface. Readonly properties use the readonly keyword to ensure that, once set, their value cannot be changed.
12345678910111213141516interface Product { readonly id: number; name: string; description?: string; } const book: Product = { id: 101, name: "TypeScript Handbook" }; const pen: Product = { id: 102, name: "Blue Pen", description: "A smooth-writing blue pen" };
In this example, the Product interface has a readonly id property, a required name property, and an optional description property. When you create a Product object, you must provide an id and name, but description is not required. If you try to assign a new value to id after the object is created, TypeScript will give you an error because id is marked as readonly. On the other hand, you can omit description entirely, or include it if you like. This makes your code safer—preventing accidental changes to properties that should never change—and more flexible, allowing objects to omit properties that are not always needed.
Bedankt voor je feedback!
