How to fix Property 'X' is unreachable because index signature covers all properties in TypeScript

// WRONG - causes TS2411 error
interface User {
  name: string;
  age: number;
  [key: string]: any;  // Index signature makes 'name' and 'age' unreachable
}

// CORRECT - separate types
interface UserBase {
  name: string;
  age: number;
}

type User = UserBase & {
  [key: string]: any;
};

// Usage
const user: User = {
  name: "Alice",
  age: 30,
  extraField: "value",  // Allowed by index signature
};

console.log(user.name);  // Type-safe: string
console.log(user.age);   // Type-safe: number

// Using Record type
type User = {
  name: string;
  age: number;
} & Record<string, any>;

// Alternative with interface extension
interface UserBase {
  name: string;
  age: number;
}

interface User extends UserBase {
  [key: string]: any;
}
// Note: This still causes TS2411! Use type intersection instead.

// Better: Use type alias with intersection
type User = UserBase & Record<string, any>;

// For specific value types
type Config = {
  apiUrl: string;
  timeout: number;
} & Record<string, string | number | boolean>;

const config: Config = {
  apiUrl: "https://api.example.com",
  timeout: 5000,
  debug: true,      // Additional boolean property
  retries: 3,       // Additional number property
};

// Instead of index signature for optional metadata
interface Product {
  id: string;
  name: string;
  price: number;
  metadata?: {
    [key: string]: any;  // Index signature in nested object is fine
  };
}

// Or use a specific type for additional data
interface Product {
  id: string;
  name: string;
  price: number;
  tags: string[];
  attributes: Record<string, string | number>;
}

// For React component props
interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
  className?: string;
  disabled?: boolean;
  // Instead of [key: string]: any, use specific optional props
  'data-testid'?: string;
  'aria-label'?: string;
}

type User = {
  name: string;
  age: number;
} & Record<string, unknown>;

function isUser(obj: any): obj is User {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    typeof obj.name === 'string' &&
    typeof obj.age === 'number'
  );
}

// Safe access with type guards
function getUserName(user: User): string {
  return user.name;  // Type-safe because we know User has name
}

// Accessing arbitrary properties
function getOptionalField(user: User, field: string): unknown {
  return user[field];  // Returns unknown, need to check type
}

// Type-safe access with narrowing
if (typeof user.customField === 'string') {
  console.log(user.customField.toUpperCase());
}

// Using Map for dynamic properties
interface User {
  name: string;
  age: number;
  metadata: Map<string, any>;  // Instead of [key: string]: any
}

const user: User = {
  name: "Bob",
  age: 25,
  metadata: new Map([
    ['role', 'admin'],
    ['lastLogin', new Date()],
    ['preferences', { theme: 'dark' }]
  ])
};

// Type-safe access to known properties
console.log(user.name);

// Access dynamic properties via Map
const role = user.metadata.get('role');
if (typeof role === 'string') {
  console.log(role.toUpperCase());
}

// Alternative: Use a separate object for dynamic properties
interface User {
  name: string;
  age: number;
  extra: Record<string, any>;
}

const user2: User = {
  name: "Charlie",
  age: 35,
  extra: {
    department: "Engineering",
    salary: 80000
  }
};

// Discriminated union for different object shapes
type ApiResponse =
  | { type: 'user'; data: UserData; metadata: Record<string, any> }
  | { type: 'product'; data: ProductData; tags: string[] }
  | { type: 'error'; message: string; code: number };

function handleResponse(response: ApiResponse) {
  switch (response.type) {
    case 'user':
      // response.data is UserData
      // response.metadata is Record<string, any>
      break;
    case 'product':
      // response.data is ProductData
      // response.tags is string[]
      break;
    case 'error':
      // response.message is string
      // response.code is number
      break;
  }
}

// Custom type predicate for validation
function hasProperty<T extends object, K extends string>(
  obj: T,
  key: K
): obj is T & Record<K, any> {
  return key in obj;
}

const obj = { name: 'Alice', age: 30 } as Record<string, any>;
if (hasProperty(obj, 'email')) {
  // obj.email is now typed as any
  console.log(obj.email);
}