Optional & Readonly Props

Part of the Introduction To TypeScript section of Coddy's JavaScript journey — lesson 41 of 73.

TypeScript provides two powerful modifiers that give you this control: the optional property modifier and the readonly modifier.

The ? symbol makes a property optional, meaning it doesn't have to be present when creating an object. This is useful for properties that might not always be needed:

interface User {
  name: string;
  email?: string;  // Optional property
}

let user1: User = { name: "Alice" };  // Valid - email is optional
let user2: User = { name: "Bob", email: "bob@example.com" };  // Also valid

The readonly modifier prevents a property from being changed after the object is created. This is perfect for properties that should remain constant, like unique identifiers:

interface Product {
  readonly id: number;  // Cannot be changed after creation
  name: string;
}

let product: Product = { id: 1, name: "Laptop" };
product.name = "Gaming Laptop";  // Valid
// product.id = 2;  // Error: Cannot assign to 'id' because it is readonly

You can combine both modifiers on the same interface, and these modifiers work identically with both interfaces and type aliases, giving you precise control over your object structures.

Challenge

Easy

Create an interface named Book with the following properties:

title of type string (required)
isbn of type string (readonly)
subtitle of type string (optional)
pages of type number (required)
publishedYear of type number (readonly)
genre of type string (optional)

Create an interface named Magazine with the following properties:

name of type string (required)
issueNumber of type number (readonly)
topic of type string (optional)
monthlySubscription of type boolean (required)

Using your interfaces, create the following variables:

Create a variable named novel of type Book with title "1984", isbn "978-0-452-28423-4", pages 328, and publishedYear 1949
Create a variable named cookbook of type Book with title "The Joy of Cooking", isbn "978-0-7432-4626-2", subtitle "All About Baking", pages 1132, publishedYear 2006, and genre "Cooking"
Create a variable named techMag of type Magazine with name "Tech Today", issueNumber 45, and monthlySubscription true
Create a variable named scienceMag of type Magazine with name "Science Weekly", issueNumber 12, topic "Climate Change", and monthlySubscription false

Create a function named getBookDetails that accepts a parameter of type Book and returns a string. The function should return the book's title and pages in the format "[title] - [pages] pages".

Create a function named getMagazineInfo that accepts a parameter of type Magazine and returns a string. The function should return the magazine's name and issue number in the format "[name] Issue #[issueNumber]".

Print the following outputs on separate lines:

Call getBookDetails with novel and print the result
Call getBookDetails with cookbook and print the result
Call getMagazineInfo with techMag and print the result
Call getMagazineInfo with scienceMag and print the result
Print the ISBN of novel
Print the subscription status of techMag (the monthlySubscription property)

Try it yourself

// TODO: Write your code here

// Create the Book interface

// Create the Magazine interface

// Create the variables using your interfaces

// Create the getBookDetails function

// Create the getMagazineInfo function

// Print the required outputs

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Optional & Readonly Props

All lessons in Introduction To TypeScript