W3Schools Tryit Editor

// Readonly Index Signatures Example
// This demonstrates how readonly index signatures would work in TypeScript

// In TypeScript, we'd define an interface with a readonly index signature:
// interface ReadonlyStringDictionary {
//   readonly [key: string]: string;
// }

// Example with constants that should not be modified
const constants = {
  PI: "3.14159",
  GOLDEN_RATIO: "1.61803",
  EULER_NUMBER: "2.71828"
};

// Make the object immutable using Object.freeze()
// This is the runtime equivalent of TypeScript's readonly modifier
Object.freeze(constants);

// Accessing values is allowed
console.log("Reading constants:");
console.log(`constants.PI: ${constants.PI}`);
console.log(`constants["GOLDEN_RATIO"]: ${constants["GOLDEN_RATIO"]}`);
console.log(`constants["EULER_NUMBER"]: ${constants["EULER_NUMBER"]}`);

// Attempting to modify values
console.log("\nAttempting to modify constants (causes runtime errors in strict mode):");
try {
  constants.PI = "3.14";
  console.log(`Modified PI: ${constants.PI}`);
} catch (error) {
  console.log(`Error: ${error.message}`);
}

try {
  constants["NEW_CONSTANT"] = "1.23";
  console.log(`Added NEW_CONSTANT: ${constants["NEW_CONSTANT"]}`);
} catch (error) {
  console.log(`Error: ${error.message}`);
}

// Readonly array example
console.log("\nReadonly array example:");
const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri"];
Object.freeze(daysOfWeek);

// Reading is allowed
console.log(`First day: ${daysOfWeek[0]}`);

// Attempting to modify
console.log("\nAttempting to modify frozen array (causes runtime errors in strict mode):");
try {
  daysOfWeek[0] = "Monday";
  console.log(`Modified first day: ${daysOfWeek[0]}`);
} catch (error) {
  console.log(`Error: ${error.message}`);
}

// In TypeScript, readonly would prevent modifications at compile time:
console.log("\nIn TypeScript, readonly would prevent modifications at compile time:");
console.log("interface ReadonlyStringDictionary {");
console.log("  readonly [key: string]: string;");
console.log("}");
console.log("");
console.log("// These would cause TypeScript compiler errors:");
console.log("// constants.PI = \"3.14\";               // Error: Cannot assign to 'PI' because index signature is readonly");
console.log("// constants[\"NEW_CONSTANT\"] = \"1.23\";  // Error: Cannot assign to index signature because it is readonly");