How to fix Index signature in type 'X' only permits reading in TypeScript

// Example 1: Readonly array index signature
interface ReadonlyStringArray {
  readonly [index: number]: string;
}

const arr: ReadonlyStringArray = ["a", "b", "c"];
arr[0] = "x"; // Error: Index signature in type 'ReadonlyStringArray' only permits reading

// Example 2: Readonly object index signature
interface ReadonlyConfig {
  readonly [key: string]: string;
}

const config: ReadonlyConfig = { apiUrl: "https://api.example.com" };
config["apiUrl"] = "https://new-api.com"; // Error: Index signature only permits reading

// Example 3: Using ReadonlyArray<T>
const numbers: ReadonlyArray<number> = [1, 2, 3];
numbers[0] = 10; // Error: Index signature in type 'readonly number[]' only permits reading

// Before (readonly - cannot assign)
interface Config {
  readonly [key: string]: string;
}

// After (mutable - can assign)
interface Config {
  [key: string]: string; // No readonly modifier
}

const config: Config = { apiUrl: "https://api.example.com" };
config["apiUrl"] = "https://new-api.com"; // Now OK
config.newKey = "value"; // Also OK

// For arrays:
// Before: readonly [index: number]: string
// After: [index: number]: string

// Problem: Readonly array
const readonlyNumbers: readonly number[] = [1, 2, 3];
readonlyNumbers[0] = 10; // Error

// Solution 1: Regular array type
const mutableNumbers: number[] = [1, 2, 3];
mutableNumbers[0] = 10; // OK

// Solution 2: Array<T> instead of ReadonlyArray<T>
const numbersArray: Array<number> = [1, 2, 3];
numbersArray[0] = 10; // OK

// Solution 3: Remove ReadonlyArray wrapper
type ReadonlyUserArray = ReadonlyArray<{ id: number; name: string }>;
type UserArray = Array<{ id: number; name: string }>; // Mutable version

const users: UserArray = [{ id: 1, name: "John" }];
users[0].name = "Jane"; // OK

// For objects with readonly index signatures
interface ReadonlyConfig {
  readonly [key: string]: string;
}

const config: ReadonlyConfig = { apiUrl: "https://api.example.com" };

// Don't mutate; create a new object
const updatedConfig: ReadonlyConfig = {
  ...config,
  apiUrl: "https://new-api.com",
};

// For readonly arrays
const readonlyArray: readonly number[] = [1, 2, 3];

// Create new array with modifications
const newArray: readonly number[] = [
  10,          // New first element
  ...readonlyArray.slice(1) // Rest of original array
];

// Or use array methods that return new arrays
const doubledArray: readonly number[] = readonlyArray.map(n => n * 2);

// Utility to make any type mutable (removes readonly from properties and index signatures)
type Mutable<T> = {
  -readonly [P in keyof T]: T[P];
};

interface ReadonlyConfig {
  readonly [key: string]: string;
  readonly apiUrl: string;
}

// Create mutable version
const config: Mutable<ReadonlyConfig> = { apiUrl: "https://api.example.com" };
config["apiUrl"] = "https://new-api.com"; // Now OK
config.newKey = "value"; // Also OK

// For arrays specifically
type MutableArray<T> = T extends readonly (infer U)[] ? U[] : T;

const readonlyArr: readonly number[] = [1, 2, 3];
const mutableArr: MutableArray<typeof readonlyArr> = [...readonlyArr];
mutableArr[0] = 10; // OK

interface ReadonlyConfig {
  readonly [key: string]: string;
}

const config: ReadonlyConfig = { apiUrl: "https://api.example.com" };

// Type assertion to bypass readonly (use sparingly!)
(config as { [key: string]: string })["apiUrl"] = "https://new-api.com";

// Or for arrays
const readonlyArray: readonly number[] = [1, 2, 3];
(readonlyArray as number[])[0] = 10;

// Even more permissive (not recommended)
(readonlyArray as any)[0] = 10;

// as const makes everything readonly
const config = {
  apiUrl: "https://api.example.com",
  endpoints: ["/users", "/posts"],
} as const;

config.apiUrl = "https://new.com"; // Error: Cannot assign to 'apiUrl' because it is read-only
config["apiUrl"] = "https://new.com"; // Error: Index signature only permits reading
config.endpoints[0] = "/new"; // Error: Index signature in type 'readonly ["/users", "/posts"]' only permits reading

// Solutions:
// 1. Don't use as const if you need mutability
const mutableConfig = {
  apiUrl: "https://api.example.com",
  endpoints: ["/users", "/posts"],
}; // No as const

mutableConfig.apiUrl = "https://new.com"; // OK

// 2. Create mutable copy when needed
const readonlyConfig = { apiUrl: "https://api.example.com" } as const;
const mutableCopy = { ...readonlyConfig, apiUrl: "https://new.com" };

// 3. Use type utility to remove readonly
type Mutable<T> = { -readonly [P in keyof T]: T[P] };
const mutableVersion: Mutable<typeof readonlyConfig> = { apiUrl: "https://new.com" };