W3Schools Tryit Editor

// Basic Index Signatures Example
// This demonstrates how index signatures work in TypeScript

// In TypeScript, we'd define interfaces with index signatures:
// interface StringDictionary {
//   [key: string]: string;
// }

// Example of an object with string keys and string values
const names = {
  "100": "John",
  firstName: "Alice",
  lastName: "Smith"
};

// Accessing properties
console.log("Accessing string dictionary properties:");
console.log(`names["firstName"]: ${names["firstName"]}`);
console.log(`names["100"]: ${names["100"]}`);

// Adding a new property
names["age"] = "30";
console.log(`After adding age property: names["age"] = ${names["age"]}`);

console.log("\nIn TypeScript, type checking would prevent incorrect assignments:");
console.log('// names["age"] = 30; // Error: Type \'number\' is not assignable to type \'string\'');

// Object with number keys and any values
// In TypeScript:
// interface NumberDictionary {
//   [index: number]: any;
// }

const scores = {
  0: "Zero",
  1: 100,
  2: true
};

console.log("\nAccessing number dictionary properties:");
console.log(`scores[0]: ${scores[0]}`);
console.log(`scores[1]: ${scores[1]}`);
console.log(`scores[2]: ${scores[2]}`);

// Adding a new property
scores[3] = { passed: true };
console.log(`After adding complex object: scores[3]:`, scores[3]);

// In JavaScript, all object keys are strings
console.log("\nNote about JavaScript objects:");
console.log("In JavaScript, all object keys are converted to strings:");
console.log(`typeof Object.keys(scores)[0]: ${typeof Object.keys(scores)[0]}`);

// But array indices are accessed as numbers
const arr = ["a", "b", "c"];
console.log("\nArray indices:");
console.log(`arr[0]: ${arr[0]}`);
console.log(`typeof arr.keys().next().value: ${typeof arr.keys().next().value}`);

console.log("\nThis distinction matters in TypeScript's type system");

Accessing string dictionary properties:
names["firstName"]: Alice
names["100"]: John
After adding age property: names["age"] = 30

In TypeScript, type checking would prevent incorrect assignments:
// names["age"] = 30; // Error: Type 'number' is not assignable to type 'string'

Accessing number dictionary properties:
scores[0]: Zero
scores[1]: 100
scores[2]: true
After adding complex object: scores[3]: { passed: true }

Note about JavaScript objects:
In JavaScript, all object keys are converted to strings:
typeof Object.keys(scores)[0]: string

Array indices:
arr[0]: a
typeof arr.keys().next().value: number

This distinction matters in TypeScript's type system