Bird
Raised Fist0
Typescriptprogramming~5 mins

Readonly utility type in Typescript - Time & Space Complexity

Choose your learning style10 modes available
LearnWhyDeepVisualTryChallengeProjectRecallTime
Time Complexity: Readonly utility type
O(n)
Understanding Time Complexity

We want to understand how the time it takes to use the Readonly utility type changes as the size of the object grows.

Specifically, how does making an object readonly affect the number of operations when the object has many properties?

Scenario Under Consideration

Analyze the time complexity of the following code snippet.


    type Readonly<T> = {
      readonly [P in keyof T]: T[P];
    };

    interface User {
      name: string;
      age: number;
      email: string;
    }

    const user: Readonly<User> = {
      name: "Alice",
      age: 30,
      email: "alice@example.com"
    };

This code creates a readonly version of a User object by applying the Readonly utility type to all its properties.

Identify Repeating Operations

Identify the loops, recursion, array traversals that repeat.

  • Primary operation: The mapped type loops over each property key in the object type.
  • How many times: Once for each property in the object (for example, 3 times for User).
How Execution Grows With Input

As the number of properties in the object grows, the number of operations grows in the same way.

Input Size (n)Approx. Operations
33 (one per property)
1010
100100

Pattern observation: The operations increase directly with the number of properties, growing in a straight line.

Final Time Complexity

Time Complexity: O(n)

This means the time to create a readonly type grows linearly with the number of properties in the object.

Common Mistake

[X] Wrong: "Making an object readonly happens instantly no matter how big it is."

[OK] Correct: The type system processes each property one by one, so more properties mean more work.

Interview Connect

Understanding how utility types like Readonly work helps you reason about type transformations and their costs, a useful skill in real projects and interviews.

Self-Check

"What if we changed Readonly to make only some properties readonly? How would the time complexity change?"

Practice

(1/5)
1. What does the Readonly utility type do in TypeScript?
easy
A. Makes all properties optional
B. Allows properties to be changed only once
C. Removes all properties from an object type
D. Makes all properties of an object type unchangeable

Solution

  1. Step 1: Understand the purpose of Readonly

    The Readonly utility type is designed to make all properties of an object type immutable, meaning they cannot be changed after initialization.

  2. Step 2: Compare with other options

    Options B, C, and D describe behaviors that are not related to Readonly. Only Makes all properties of an object type unchangeable correctly describes making properties unchangeable.

  3. Final Answer:

    Makes all properties of an object type unchangeable -> Option D

  4. Quick Check:

    Readonly = makes properties unchangeable [OK]
Hint: Readonly means no changes allowed to object properties [OK]
Common Mistakes:
  • Thinking Readonly allows one-time changes
  • Confusing Readonly with Partial or Required types
  • Believing Readonly removes properties
2. Which of the following is the correct syntax to create a readonly type from an interface User?
easy
A. type ReadonlyUser = Readonly<User>();
B. type ReadonlyUser = Readonly<User>;
C. type ReadonlyUser = readonly User;
D. type ReadonlyUser = Readonly<User>[];

Solution

  1. Step 1: Recall the syntax of Readonly utility

    The correct syntax to create a readonly version of a type or interface is Readonly<TypeName> without parentheses or array brackets.

  2. Step 2: Analyze each option

    type ReadonlyUser = Readonly<User>; uses the correct generic syntax. type ReadonlyUser = Readonly<User>(); incorrectly uses parentheses. type ReadonlyUser = readonly User; uses lowercase 'readonly' which is a keyword for arrays or tuples, not for types. type ReadonlyUser = Readonly<User>[]; creates an array of readonly users, which is different.

  3. Final Answer:

    type ReadonlyUser = Readonly<User>; -> Option B

  4. Quick Check:

    Readonly syntax = Readonly<Type> [OK]
Hint: Use Readonly<Type> without parentheses or brackets [OK]
Common Mistakes:
  • Adding parentheses after Readonly
  • Using lowercase 'readonly' instead of utility type
  • Confusing array of readonly with readonly type
3. What will be the output of the following TypeScript code?
interface Config {
  url: string;
  timeout: number;
}

const config: Readonly<Config> = { url: 'api.com', timeout: 5000 };

config.timeout = 3000;
console.log(config.timeout);
medium
A. Compilation error
B. 5000
C. 3000
D. undefined

Solution

  1. Step 1: Understand Readonly effect on assignment

    The Readonly type makes all properties immutable. Trying to assign a new value to config.timeout will cause a compilation error.

  2. Step 2: Check the code behavior

    The line config.timeout = 3000; is invalid and TypeScript will not compile this code, so no runtime output occurs.

  3. Final Answer:

    Compilation error -> Option A

  4. Quick Check:

    Readonly blocks property assignment = Compilation error [OK]
Hint: Readonly properties cannot be assigned new values [OK]
Common Mistakes:
  • Assuming readonly allows property changes
  • Expecting old value printed despite error
  • Confusing runtime error with compile error
4. Identify the error in this TypeScript code using Readonly and fix it:
interface Point {
  x: number;
  y: number;
}

const p: Readonly<Point> = { x: 10, y: 20 };
p.x = 15;
console.log(p.x);
medium
A. Change p.x = 15; to p = { x: 15, y: 20 };
B. Use as const instead of Readonly
C. Remove Readonly to allow property changes
D. Declare p as let instead of const

Solution

  1. Step 1: Identify why assignment fails

    The Readonly type prevents changing properties like p.x</>. The error is caused by trying to assign p.x = 15;.

  2. Step 2: Fix by removing Readonly

    Removing Readonly allows property changes. Options A, B, and D do not fix the core problem of property immutability.

  3. Final Answer:

    Remove Readonly to allow property changes -> Option C

  4. Quick Check:

    Readonly blocks property assignment; remove it to fix [OK]
Hint: Remove Readonly to allow property updates [OK]
Common Mistakes:
  • Trying to assign to readonly property instead of removing Readonly
  • Using 'as const' which makes object deeply readonly
  • Changing variable declaration without fixing immutability
5. Given this nested object type, how can you make all properties readonly including nested ones?
interface Settings {
  theme: string;
  layout: {
    header: boolean;
    footer: boolean;
  };
}
hard
A. Use a custom DeepReadonly type that recursively applies Readonly
B. Use Partial<Settings> to make properties readonly
C. Use readonly Settings keyword
D. Use Readonly<Settings> only

Solution

  1. Step 1: Understand shallow vs deep readonly

    The built-in Readonly utility only makes the top-level properties readonly. Nested objects remain mutable.

  2. Step 2: Use a recursive DeepReadonly type

    To make nested properties readonly, you need a custom type that applies Readonly recursively to all nested objects.

  3. Final Answer:

    Use a custom DeepReadonly type that recursively applies Readonly -> Option A

  4. Quick Check:

    Readonly is shallow; use DeepReadonly for nested [OK]
Hint: Readonly is shallow; use recursive type for nested readonly [OK]
Common Mistakes:
  • Assuming Readonly makes nested properties readonly
  • Using 'readonly' keyword incorrectly on types
  • Confusing Partial with Readonly
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard