Readonly properties in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a readonly property in a TypeScript interface.

Typescript

interface User {
  readonly [1]: string;
}

Drag options to blanks, or click blank then click option'

Apassword

Bage

Cemail

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using a mutable property name without readonly

Trying to assign a value to a readonly property later

The readonly keyword makes the property immutable after initialization. Here, name is the readonly property.

2fill in blank

medium

Complete the code to create an object that respects the readonly property.

Typescript

const user: { readonly id: number } = { id: [1] };

Drag options to blanks, or click blank then click option'

A42

B'42'

Cnull

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning a string instead of a number

Trying to assign a boolean or null

The id property is a number and readonly. Assigning 42 as a number is correct.

3fill in blank

hard

Fix the error by completing the code to prevent modifying a readonly property.

Typescript

interface Point {
  readonly x: number;
  readonly y: number;
}

const p: Point = { x: 10, y: 20 };
p.[1] = 30;

Drag options to blanks, or click blank then click option'

AtoString

Bx

Cz

Dy

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign to a readonly property

Using a property name that does not exist

Properties x and y are readonly. Trying to assign p.x = 30 causes an error. The blank is the property name being assigned.

4fill in blank

hard

Fill both blanks to create a readonly property and assign it correctly.

Typescript

interface Config {
  [1] version: string;
}

const config: Config = { version: [2] };

Drag options to blanks, or click blank then click option'

Areadonly

B'1.0.0'

C"1.0.0"

Dconst

Attempts:

3 left

💡 Hint

Common Mistakes

Using const instead of readonly in interface

Assigning a string without quotes

The property version is declared readonly. The value assigned is a string literal with double quotes.

5fill in blank

hard

Fill all three blanks to create a readonly property, assign it, and try to modify it (which should cause an error).

Typescript

interface Settings {
  [1] theme: string;
}

const settings: Settings = { theme: [2] };
settings.[3] = "dark";

Drag options to blanks, or click blank then click option'

Areadonly

B"light"

Ctheme

Dconst

Attempts:

3 left

💡 Hint

Common Mistakes

Not using readonly keyword

Assigning a value without quotes

Trying to modify a readonly property

The property theme is readonly. It is assigned the string "light". Trying to assign settings.theme = "dark" causes an error because theme is readonly.