Read-only arrays in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a read-only array of numbers.

Typescript

const numbers: [1] = [1, 2, 3];

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

Areadonly number[]

BArray<number>

Cnumber[]

Dconst number[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using just number[] allows modification.

Trying to use const inside the type is incorrect.

Using readonly number[] declares an array that cannot be changed after creation.

2fill in blank

medium

Complete the code to prevent modification of the array elements.

Typescript

function printFirst(numbers: [1]) {
  console.log(numbers[0]);
}

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

AArray<number>

Breadonly number[]

Cnumber[]

Dconst number[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using number[] allows modification inside the function.

Using const in the type is invalid.

Using readonly number[] ensures the function cannot modify the array.

3fill in blank

hard

Fix the error by completing the code to assign a read-only array.

Typescript

const arr: readonly string[] = ['a', 'b'];
// Error: Cannot assign to 'arr'
arr = [1];

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

Aarr

B['a', 'b']

C['c', 'd']

Dnew Array('c', 'd')

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign a new array literal to a read-only variable.

Using new Array() to assign a new array.

You cannot assign a new array to a read-only variable. Assigning arr to itself avoids the error.

4fill in blank

hard

Fill both blanks to create a read-only array and access its first element.

Typescript

const fruits: [1] = ['apple', 'banana'];
const firstFruit: string = fruits[2];

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

Areadonly string[]

Bnumber

C[0]

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using number as the type for the array.

Trying to access the first element with .length.

The array is declared as readonly string[] and the first element is accessed with [0].

5fill in blank

hard

Fill all three blanks to declare a read-only array, map its elements, and prevent modification.

Typescript

const letters: [1] = ['x', 'y', 'z'];
const upperLetters = letters.map(letter => letter.[2]());
// Error if uncommented: letters.[3]('a');

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

Areadonly string[]

BtoUpperCase

Cpush

Dstring[]

Attempts:

3 left

💡 Hint

Common Mistakes

Declaring the array as mutable string[].

Using a wrong method name instead of toUpperCase.

Trying to use push on a read-only array.

The array is read-only (readonly string[]), mapping uses toUpperCase(), and push is not allowed on read-only arrays.

Practice

1. What does a readonly array in TypeScript do?

easy

A. Only prevents changing the array length

B. Allows adding new elements but not removing existing ones

C. Makes the array elements optional

D. Prevents any changes to the array elements after creation

Solution

1. Step 1: Understand the readonly keyword

   The readonly keyword before an array type means the array cannot be changed after it is created.

2. Step 2: Effects on the array

   This means you cannot add, remove, or modify elements in the array once it is set.

3. Final Answer:

   Prevents any changes to the array elements after creation -> Option D

4. Quick Check:

   readonly arrays are immutable [OK]

Hint: Readonly arrays block all changes to elements [OK]

Common Mistakes:

• Thinking readonly only blocks length changes
• Assuming elements can be modified individually
• Confusing readonly with optional elements

2. Which of the following is the correct syntax to declare a read-only array of numbers in TypeScript?

easy

A. let nums: readonly number[] = [1, 2, 3];

B. let nums: number[] readonly = [1, 2, 3];

C. let nums: number readonly[] = [1, 2, 3];

D. let nums: number[] = readonly [1, 2, 3];

Solution

1. Step 1: Recall the correct readonly syntax

   In TypeScript, readonly comes before the array type, like readonly number[].

2. Step 2: Check each option

   let nums: readonly number[] = [1, 2, 3]; uses readonly number[], which is correct syntax. Others place readonly incorrectly.

3. Final Answer:

   let nums: readonly number[] = [1, 2, 3]; -> Option A

4. Quick Check:

   readonly before type [OK]

Hint: Put readonly before the array type, not after [OK]

Common Mistakes:

• Placing readonly after the array brackets
• Using readonly as a variable modifier
• Trying to put readonly inside the array literal

3. What will be the output of this TypeScript code?

const arr: readonly string[] = ['a', 'b', 'c'];
// arr.push('d');
console.log(arr.length);

medium

A. 4

B. undefined

C. 3

D. Error: Property 'push' does not exist on type 'readonly string[]'

Solution

1. Step 1: Understand the array declaration

   The array arr is declared as readonly string[] with 3 elements: 'a', 'b', 'c'.

2. Step 2: Check the commented out push and output

   The push line is commented out, so it does not run. The length remains 3.

3. Final Answer:

   3 -> Option C

4. Quick Check:

   Readonly array length unchanged = 3 [OK]

Hint: Commented push means length stays same [OK]

Common Mistakes:

• Assuming push works on readonly arrays
• Expecting length to increase despite push commented
• Confusing runtime errors with compile-time errors

4. Identify the error in this TypeScript code using a read-only array:

const nums: readonly number[] = [1, 2, 3];
nums[0] = 10;

medium

A. Type 'number' is not assignable to type 'readonly number[]'

B. Cannot assign to '0' because it is a read-only property

C. Syntax error: missing semicolon

D. No error, code runs fine

Solution

1. Step 1: Understand the readonly array behavior

   The array nums is readonly, so its elements cannot be changed after creation.

2. Step 2: Analyze the assignment to an element

   Trying to assign nums[0] = 10 causes an error because elements are read-only.

3. Final Answer:

   Cannot assign to '0' because it is a read-only property -> Option B

4. Quick Check:

   Readonly elements cannot be changed [OK]

Hint: Readonly arrays block element assignment [OK]

Common Mistakes:

• Thinking only array structure is readonly, not elements
• Ignoring TypeScript error messages
• Assuming semicolon missing causes error

5. Given a function that accepts a read-only array, which of these operations inside the function is allowed?

function process(items: readonly number[]) {
  // Which line is valid?
  // A) items.push(5);
  // B) items[0] = 10;
  // C) const first = items[0];
  // D) items.length = 0;
}

hard

A. const first = items[0];

B. items.push(5);

C. items[0] = 10;

D. items.length = 0;

Solution

1. Step 1: Understand read-only array restrictions

   Read-only arrays do not allow modifying methods like push, element assignment, or length changes.

2. Step 2: Check each operation

   Only reading elements, like const first = items[0];, is allowed. Others cause errors.

3. Final Answer:

   const first = items[0]; -> Option A

4. Quick Check:

   Reading elements allowed, modifying disallowed [OK]

Hint: Readonly arrays allow reading, not modifying [OK]

Common Mistakes:

• Trying to push or assign elements in readonly arrays
• Attempting to change array length
• Confusing read-only with mutable arrays