W3Schools Tryit Editor

// Numeric Index Signatures Example
// This demonstrates the relationship between numeric and string indices in TypeScript

// In TypeScript, we'd define an interface with both numeric and string index signatures:
// interface MultiIndexArray {
//   [index: number]: string;   // Accessed with numbers (like array indices)
//   [key: string]: string;     // Accessed with strings (like object properties)
// }

// Simple string array example
const stringArray = ["a", "b", "c"];

// Accessing with numeric indices
console.log("Accessing with numeric indices:");
console.log(`stringArray[0]: ${stringArray[0]}`);
console.log(`stringArray[1]: ${stringArray[1]}`);
console.log(`stringArray[2]: ${stringArray[2]}`);

// Accessing with string indices
console.log("\nAccessing with string indices (converted to numbers):");
console.log(`stringArray["0"]: ${stringArray["0"]}`);
console.log(`stringArray["1"]: ${stringArray["1"]}`);

// Accessing native array property
console.log("\nAccessing array properties:");
console.log(`stringArray["length"]: ${stringArray["length"]}`);
console.log(`stringArray.length: ${stringArray.length}`);

// Demonstrating the key conversion in JavaScript
console.log("\nJavaScript key type conversion:");
console.log("JavaScript converts numeric keys to strings when used as object properties:");

// Create an object with both numeric and string keys
const mixed = {
  0: "zero",
  "1": "one",
  2: "two",
  "three": 3
};

console.log("Object with mixed keys:", mixed);
console.log("Object.keys(mixed):", Object.keys(mixed));
console.log("Types of keys:", Object.keys(mixed).map(key => typeof key));

// Demonstrate the difference between arrays and objects
console.log("\nDifference between arrays and objects:");
console.log("typeof stringArray:", typeof stringArray);
console.log("Array.isArray(stringArray):", Array.isArray(stringArray));
console.log("typeof mixed:", typeof mixed);
console.log("Array.isArray(mixed):", Array.isArray(mixed));

// In TypeScript, this distinction is important for type safety
console.log("\nIn TypeScript, these distinctions are important:");
console.log("- Number indexer must be a subtype of string indexer");
console.log("- This is because JavaScript converts number properties to strings");
console.log("- interface MultiIndexArray { [index: number]: string; [key: string]: string; }");

Accessing with numeric indices:
stringArray[0]: a
stringArray[1]: b
stringArray[2]: c

Accessing with string indices (converted to numbers):
stringArray["0"]: a
stringArray["1"]: b

Accessing array properties:
stringArray["length"]: 3
stringArray.length: 3

JavaScript key type conversion:
JavaScript converts numeric keys to strings when used as object properties:
Object with mixed keys: { '0': 'zero', '1': 'one', '2': 'two', three: 3 }
Object.keys(mixed): [ '0', '1', '2', 'three' ]
Types of keys: [ 'string', 'string', 'string', 'string' ]

Difference between arrays and objects:
typeof stringArray: object
Array.isArray(stringArray): true
typeof mixed: object
Array.isArray(mixed): false

In TypeScript, these distinctions are important:
- Number indexer must be a subtype of string indexer
- This is because JavaScript converts number properties to strings
- interface MultiIndexArray { [index: number]: string; [key: string]: string; }