W3Schools Tryit Editor

// Mixed Property Types Example
// This demonstrates how to combine specific properties with an index signature

// In TypeScript, we'd define an interface with both specific properties and an index signature:
// interface EmployeeDirectory {
//   [id: string]: string | number | boolean;
//   name: string;
//   age: number;
//   isManager: boolean;
// }

// Example employee object with both specific and dynamic properties
const employee = {
  name: "John Doe",
  age: 32,
  isManager: true,
  "department": "Engineering",
  "employeeId": 12345,
  "fullTime": true
};

// Accessing specific properties
console.log("Accessing specific properties:");
console.log(`employee.name: ${employee.name}`);
console.log(`employee.age: ${employee.age}`);
console.log(`employee.isManager: ${employee.isManager}`);

// Accessing dynamic properties using brackets notation
console.log("\nAccessing dynamic properties:");
console.log(`employee["department"]: ${employee["department"]}`);
console.log(`employee["employeeId"]: ${employee["employeeId"]}`);
console.log(`employee["fullTime"]: ${employee["fullTime"]}`);

// Demonstrate adding a new property
employee["hireDate"] = "2021-05-15";
console.log(`\nAdded property - employee["hireDate"]: ${employee["hireDate"]}`);

// In TypeScript, adding properties of incompatible types would cause errors
console.log("\nIn TypeScript, this would cause a type error:");
console.log('// employee["salary"] = { amount: 75000, currency: "USD" };');
console.log('// Error: Property \'salary\' of type \'object\' is not assignable to string index type \'string | number | boolean\'');

// In TypeScript, all properties (both specific and indexed) must conform to the index signature type
console.log("\nAll properties must match the index signature type in TypeScript:");
console.log("interface EmployeeDirectory {");
console.log("  [id: string]: string | number | boolean;");
console.log("  name: string;          // OK: string is assignable to 'string | number | boolean'");
console.log("  age: number;           // OK: number is assignable to 'string | number | boolean'");
console.log("  isManager: boolean;    // OK: boolean is assignable to 'string | number | boolean'");
console.log("  // salary: object;     // Error: object is not assignable to 'string | number | boolean'");
console.log("}");

Accessing specific properties:
employee.name: John Doe
employee.age: 32
employee.isManager: true

Accessing dynamic properties:
employee["department"]: Engineering
employee["employeeId"]: 12345
employee["fullTime"]: true

Added property - employee["hireDate"]: 2021-05-15

In TypeScript, this would cause a type error:
// employee["salary"] = { amount: 75000, currency: "USD" };
// Error: Property 'salary' of type 'object' is not assignable to string index type 'string | number | boolean'

All properties must match the index signature type in TypeScript:
interface EmployeeDirectory {
  [id: string]: string | number | boolean;
  name: string;          // OK: string is assignable to 'string | number | boolean'
  age: number;           // OK: number is assignable to 'string | number | boolean'
  isManager: boolean;    // OK: boolean is assignable to 'string | number | boolean'
  // salary: object;     // Error: object is not assignable to 'string | number | boolean'
}