Readonly class properties in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the <code>readonly</code> keyword do in a TypeScript class property?

It makes the property value unchangeable after it is initialized, preventing any reassignment.

beginner

Can a readonly property be assigned a value inside the constructor?

Yes, readonly properties can be assigned or modified inside the constructor but not outside of it.

beginner

What happens if you try to assign a new value to a readonly property outside the constructor?

TypeScript will show a compile-time error preventing the reassignment.

beginner

Example: <pre>class Car { readonly model: string; constructor(model: string) { this.model = model; } }</pre> Can you change <code>model</code> after creating a <code>Car</code> object?

No, once the model is set in the constructor, it cannot be changed later because it is readonly.

beginner

Why use readonly properties in classes?

To protect important data from accidental changes and make the code safer and easier to understand.

What is true about a readonly property in TypeScript?

A It can only be assigned once, typically in the constructor.

B It can be changed anytime after object creation.

C It is the same as a private property.

D It can only hold numbers.

A readonly property can be assigned once, usually in the constructor, and cannot be changed later.

Where can you assign a value to a readonly property?

A Only outside the class.

B Anywhere in the class methods.

C Inside the constructor.

D In any function.

You can assign or modify a readonly property inside the constructor.

What error occurs if you try to change a readonly property after construction?

A Runtime error.

B Compile-time error.

C No error, it changes normally.

D Syntax error.

TypeScript prevents reassignment of readonly properties with a compile-time error.

Which keyword makes a class property immutable after initialization?

A readonly

B const

C private

D static

readonly makes a property immutable after it is initialized.

Why might you choose readonly over private?

A <code>private</code> makes the property constant.

B <code>private</code> allows changes from outside.

C <code>readonly</code> hides the property completely.

D <code>readonly</code> allows read access but prevents changes.

readonly lets others read the property but stops them from changing it, unlike private which restricts access.

Explain how readonly properties work in TypeScript classes and when you can assign their values.

Think about when and where you can set the value and what happens if you try to change it later.

Describe a real-life example where using readonly properties in a class would be helpful.

Imagine something that should never change once set, like a serial number or birthdate.

Practice

1. What does the readonly keyword do when used on a class property in TypeScript?

easy

A. It allows the property to be changed anytime.

B. It makes the property private and inaccessible outside the class.

C. It prevents the property from being changed after initialization.

D. It deletes the property after the constructor runs.

Solution

1. Step 1: Understand the purpose of readonly

   The readonly keyword marks a property so it cannot be changed after it is set initially.

2. Step 2: Check when assignment is allowed

   Assignment to a readonly property is only allowed during declaration or inside the constructor.

3. Final Answer:

   It prevents the property from being changed after initialization. -> Option C

4. Quick Check:

   Readonly means fixed value after set [OK]

Hint: Readonly means value can't change after constructor [OK]

Common Mistakes:

• Thinking readonly makes property private
• Assuming readonly allows changes anytime
• Confusing readonly with deleting properties

2. Which of the following is the correct way to declare a readonly property id of type number in a TypeScript class?

easy

A. id: readonly number;

B. readonly id: number;

C. let readonly id: number;

D. const id: number;

Solution

1. Step 1: Recall TypeScript readonly syntax

   The correct syntax places readonly before the property name and type.

2. Step 2: Check each option

   readonly id: number; matches the correct syntax: readonly id: number;. Others misuse keywords or order.

3. Final Answer:

   readonly id: number; -> Option B

4. Quick Check:

   Readonly keyword before property name [OK]

Hint: Put readonly before property name, not after type [OK]

Common Mistakes:

• Using const inside class properties
• Placing readonly after the type
• Combining let with readonly incorrectly

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

class User {
  readonly name: string;
  constructor(name: string) {
    this.name = name;
  }
  changeName(newName: string) {
    // @ts-ignore
    this.name = newName;
  }
}
const user = new User('Alice');
user.changeName('Bob');
console.log(user.name);

medium

A. Alice

B. undefined

C. Compilation error

D. Bob

Solution

1. Step 1: Understand readonly assignment rules

   The name property is readonly and assigned in the constructor, so initial value is 'Alice'. TypeScript enforces this at compile-time.

2. Step 2: Analyze the changeName method

   The @ts-ignore suppresses the TypeScript compile error for assigning to readonly. The code compiles to plain JavaScript, where objects are mutable, so this.name = newName; sets it to 'Bob' at runtime.

3. Final Answer:

   Bob -> Option D

4. Quick Check:

   Readonly is compile-time only; runtime allows changes [OK]

Hint: Readonly bypassed at runtime via @ts-ignore [OK]

Common Mistakes:

• Thinking readonly prevents runtime changes
• Expecting compilation error despite @ts-ignore
• Believing output remains 'Alice'

4. Identify the error in this TypeScript class:

class Product {
  readonly price: number;
  constructor() {
    // No assignment to price here
  }
}
const p = new Product();
p.price = 100;

medium

A. Error: readonly property 'price' is not initialized.

B. Error: Cannot assign to 'price' outside constructor.

C. No error, code runs fine.

D. Error: price must be declared as private.

Solution

1. Step 1: Check readonly property initialization

   The readonly property price must be assigned during declaration or in the constructor.

2. Step 2: Analyze constructor and assignment

   The constructor does not assign price, so TypeScript reports an error about missing initialization.

3. Final Answer:

   Error: readonly property 'price' is not initialized. -> Option A

4. Quick Check:

   Readonly props must be initialized at declaration or constructor [OK]

Hint: Always initialize readonly properties in constructor or declaration [OK]

Common Mistakes:

• Trying to assign readonly property after construction
• Ignoring missing initialization error
• Confusing readonly with private

5. Given this class, how can you safely allow updating the version property while keeping id readonly?

class Document {
  readonly id: string;
  version: number;
  constructor(id: string, version: number) {
    this.id = id;
    this.version = version;
  }
}

hard

A. Keep id readonly and update version normally via a method.

B. Make both id and version readonly and update via constructor only.

C. Remove readonly from id to allow all updates.

D. Make version readonly and update id instead.

Solution

1. Step 1: Understand readonly usage

   The id should remain readonly to keep it fixed after creation.

2. Step 2: Allow version updates

   The version property is not readonly, so it can be updated safely anytime, for example via a method.

3. Final Answer:

   Keep id readonly and update version normally via a method. -> Option A

4. Quick Check:

   Readonly for fixed, normal for changeable [OK]

Hint: Readonly for fixed props, normal for changeable ones [OK]

Common Mistakes:

• Making all properties readonly and losing flexibility
• Removing readonly from fixed properties
• Confusing which property should be updated