How to fix readonly property cannot be assigned to in TypeScript

// Interface with readonly properties
interface User {
  readonly id: number;      // This property is readonly
  readonly name: string;    // This property is readonly
  email: string;           // This property is mutable
}

const user: User = { id: 1, name: "John", email: "[email protected]" };
user.id = 2; // Error: readonly property cannot be assigned to

class Config {
  readonly apiUrl: string;  // Readonly property
  timeout: number;          // Mutable property

  constructor(url: string) {
    this.apiUrl = url; // OK: assignment in constructor
    this.timeout = 3000;
  }
}

const config = new Config("https://api.example.com");
config.apiUrl = "https://new.com"; // Error: readonly property cannot be assigned to

// Before: readonly prevents mutation
interface User {
  readonly id: number;
  readonly name: string;
}

// After: properties are mutable
interface User {
  id: number;      // Now writable
  name: string;    // Now writable
}

const user: User = { id: 1, name: "John" };
user.id = 2;       // Now allowed
user.name = "Jane"; // Now allowed

interface User {
  readonly id: number;
  readonly name: string;
  readonly email: string;
}

const user: User = { id: 1, name: "John", email: "[email protected]" };

// Don't mutate - create a new object
const updatedUser: User = {
  ...user,
  email: "[email protected]", // New value for email
};

// Original user remains unchanged
console.log(user.email); // "[email protected]"
console.log(updatedUser.email); // "[email protected]"

interface Settings {
  readonly theme: string;
  readonly preferences: {
    readonly notifications: boolean;
    readonly language: string;
  };
}

const settings: Settings = {
  theme: "dark",
  preferences: {
    notifications: true,
    language: "en"
  }
};

// Create new object with updated nested property
const newSettings: Settings = {
  ...settings,
  preferences: {
    ...settings.preferences,
    language: "fr" // Update nested property
  }
};

// Utility type to make all properties mutable
type Mutable<T> = {
  -readonly [P in keyof T]: T[P];
};

interface User {
  readonly id: number;
  readonly name: string;
}

// Create a mutable version for local manipulation
const user: Mutable<User> = { id: 1, name: "John" };
user.id = 2;         // Allowed with Mutable type
user.name = "Jane";  // Allowed with Mutable type

// Convert back to readonly when done
const readonlyUser: User = user;

// Make specific properties mutable
type MakeMutable<T, K extends keyof T> = Omit<T, K> & {
  [P in K]: T[P];
};

interface User {
  readonly id: number;
  readonly name: string;
  readonly email: string;
}

// Only make email mutable
type UserWithMutableEmail = MakeMutable<User, 'email'>;

const user: UserWithMutableEmail = { id: 1, name: "John", email: "[email protected]" };
user.email = "[email protected]"; // Allowed
// user.id = 2; // Still error: readonly

const readonlyArray: readonly string[] = ["a", "b", "c"];

// Error: push modifies the array
// readonlyArray.push("d");

// Solution 1: Create new array
const newArray = [...readonlyArray, "d"];

// Solution 2: Use non-mutating methods
const filtered = readonlyArray.filter(item => item !== "b");

// Solution 3: Convert to mutable temporarily
const mutableArray: string[] = [...readonlyArray];
mutableArray.push("d");

const readonlyTuple: readonly [number, string] = [1, "a"];

// Error: cannot modify tuple elements
// readonlyTuple[0] = 2;

// Create new tuple instead
const newTuple: readonly [number, string] = [2, readonlyTuple[1]];

interface User {
  readonly id: number;
  readonly name: string;
}

const user: User = { id: 1, name: "John" };

// Type assertion to bypass readonly
(user as { id: number; name: string }).id = 2;

// More direct (but less safe)
(user as any).id = 3;

// Safer: assert to a mutable version of the same type
type MutableUser = { id: number; name: string };
(user as MutableUser).name = "Jane";