How to fix Index signature must be a string, number, symbol, or template literal type in TypeScript

// WRONG - using boolean
interface Config {
  [key: boolean]: string;  // Error!
}

// CORRECT - use string instead
interface Config {
  [key: string]: string;
}

// Example usage
const config: Config = {
  "enabled": "true",
  "debug": "false",
  "maxRetries": "3"
};

interface Settings {
  [key: string]: boolean;
}

const settings: Settings = {
  darkMode: true,
  notifications: false,
  autoSave: true
};

// WRONG - trying to use string for numeric indices
interface NumberMap {
  [key: string]: number;  // Works but not type-safe for array access
}

// CORRECT - use number for array indices
interface NumberArray {
  [index: number]: number;
}

const scores: NumberArray = [95, 87, 92];
const firstScore = scores[0];  // Type: number

// For dictionary with string keys and number values
interface ScoresDict {
  [name: string]: number;
}

const studentScores: ScoresDict = {
  "alice": 95,
  "bob": 87,
  "charlie": 92
};

// WRONG - trying to use literal union
type EventHandlers = {
  [event: 'click' | 'hover' | 'focus']: () => void;  // Error!
};

// CORRECT - use template literal type with pattern
type EventHandlers = {
  [event: `on${string}`]: () => void;
};

const handlers: EventHandlers = {
  onClick: () => console.log("Clicked"),
  onHover: () => console.log("Hovered"),
  onFocus: () => console.log("Focused")
};

// More complex patterns
type CSSProperties = {
  [property: `--${string}`]: string;
};

const cssVars: CSSProperties = {
  "--primary-color": "#007bff",
  "--secondary-color": "#6c757d",
  "--font-size": "16px"
};

// WRONG - union type in index signature
type Status = 'pending' | 'success' | 'error';
type StatusMap = {
  [key: Status]: string;  // Error!
};

// CORRECT - use mapped type
type Status = 'pending' | 'success' | 'error';
type StatusMap = {
  [K in Status]: string;
};

const messages: StatusMap = {
  pending: "Processing...",
  success: "Completed successfully",
  error: "An error occurred"
};

// Alternative: Record utility type
type StatusMap2 = Record<Status, string>;

// If you need dynamic keys with specific value types
type DynamicStatusMap = {
  [key: string]: Status;  // Values are Status, keys are any string
};

const userStatus: DynamicStatusMap = {
  user1: 'pending',
  user2: 'success',
  user3: 'error'
};

// WRONG - unconstrained generic
interface Dictionary<T> {
  [key: T]: string;  // Error! T could be anything
}

// CORRECT - constrain T to allowed index types
interface Dictionary<T extends string | number | symbol> {
  [key: T]: string;
}

// Usage
const stringDict: Dictionary<string> = {
  "key1": "value1",
  "key2": "value2"
};

const numberDict: Dictionary<number> = {
  1: "one",
  2: "two",
  3: "three"
};

// For template literal types
type PatternDictionary<T extends string> = {
  [key: `prefix-${T}`]: string;
};

const prefixed: PatternDictionary<'item' | 'user'> = {
  'prefix-item': "Item value",
  'prefix-user': "User value"
};

// WRONG - trying to use unique keys with string
interface Metadata {
  [key: string]: any;  // Not truly unique
}

// CORRECT - use symbol for unique metadata
const metadataKey = Symbol("metadata");

interface WithMetadata {
  [metadataKey]: {
    createdAt: Date;
    version: number;
  };
  [key: string]: any;
}

const obj: WithMetadata = {
  name: "Example",
  value: 42,
  [metadataKey]: {
    createdAt: new Date(),
    version: 1
  }
};

// Multiple symbol keys
const debugKey = Symbol("debug");
const cacheKey = Symbol("cache");

interface EnhancedObject {
  [debugKey]: boolean;
  [cacheKey]: Map<string, any>;
  [key: string]: unknown;
}