How to fix Object literal may only specify known properties in TypeScript

interface User {
  name: string;
  age: number;
}

// ERROR: 'email' doesn't exist in User
function saveUser(user: User) {}

saveUser({ name: 'John', age: 30, email: '[email protected]' });
// Object literal may only specify known properties...

// FIX: Remove the extra property
saveUser({ name: 'John', age: 30 });

// OR if 'email' should be included, update the interface:
interface User {
  name: string;
  age: number;
  email?: string;  // Make it optional
}

// ERROR: Typo in 'colour' (should be 'color')
interface Config {
  color: string;
  size: number;
}

const config: Config = { colour: 'red', size: 10 };
// Object literal may only specify known properties...

// FIX: Correct the typo
const config: Config = { color: 'red', size: 10 };

interface User {
  name: string;
  age: number;
}

// ERROR: Extra 'metadata' property
saveUser({ name: 'John', age: 30, metadata: { id: 1 } });

// FIX: Use type assertion
saveUser({ name: 'John', age: 30, metadata: { id: 1 } } as User);

// OR use the newer 'as' syntax
saveUser({ name: 'John', age: 30, metadata: { id: 1 } } as User);

// WARNING: This suppresses the error but the extra property
// will be lost at runtime since TypeScript only affects type checking

interface ButtonProps {
  label: string;
  onClick: () => void;
}

// ERROR: Extra 'className' property
const Button = ({ label, onClick, className }: ButtonProps & { className?: string }) => {
  return <button className={className} onClick={onClick}>{label}</button>;
};

// FIX: Update the interface to include className
interface ButtonProps {
  label: string;
  onClick: () => void;
  className?: string;
}

interface User {
  name: string;
  age: number;
}

// ERROR: Direct object literal
saveUser({ name: 'John', age: 30, email: '[email protected]' });

// FIX: Assign to variable first
const userData = { name: 'John', age: 30, email: '[email protected]' };
saveUser(userData); // This works!

// Why this works: TypeScript uses structural typing
// The variable 'userData' has at least the properties of User
// Extra properties don't break the contract

// Common pattern for configuration objects:
interface Config {
  apiUrl: string;
  timeout: number;
}

function initialize(config: Config) {}

// ERROR: Direct literal with extra debug property
initialize({ apiUrl: '/api', timeout: 5000, debug: true });

// FIX: Use variable
const appConfig = { apiUrl: '/api', timeout: 5000, debug: true };
initialize(appConfig); // Works

// BEFORE: Strict interface
interface Config {
  apiUrl: string;
  timeout: number;
}
// ERROR: Can't pass extra properties
const config: Config = { apiUrl: '/api', timeout: 5000, retries: 3 };

// AFTER: Add index signature for extra properties
interface Config {
  apiUrl: string;
  timeout: number;
  [key: string]: any; // Allows any extra string properties
}

// Now this works:
const config: Config = { apiUrl: '/api', timeout: 5000, retries: 3 };

// More type-safe: Use Record for specific value types
interface Config {
  apiUrl: string;
  timeout: number;
  options: Record<string, string | number | boolean>;
}

const config: Config = {
  apiUrl: '/api',
  timeout: 5000,
  options: { retries: 3, debug: true, mode: 'production' }
};

// For React components with spread props:
interface BaseProps {
  children: React.ReactNode;
}

type DivProps = BaseProps & React.HTMLAttributes<HTMLDivElement>;

const Container = (props: DivProps) => {
  // Can spread all div attributes including className, style, etc.
  return <div {...props}>{props.children}</div>;
};

// tsconfig.json
{
  "compilerOptions": {
    "suppressExcessPropertyErrors": true
  }
}

// Use Partial for optional configurations
interface RequiredConfig {
  apiUrl: string;
  timeout: number;
}

type Config = RequiredConfig & Partial<{
  retries: number;
  debug: boolean;
  cache: boolean;
}>;

// Now all are optional extras
const config: Config = {
  apiUrl: '/api',
  timeout: 5000,
  retries: 3, // No error
  debug: true // No error
};

// Use Omit to remove strictness from specific functions
interface User {
  id: string;
  name: string;
  age: number;
}

function updateUser(id: string, updates: Partial<Omit<User, 'id'>>) {
  // Can accept any subset of User properties except 'id'
}

updateUser('123', { name: 'John', extraField: 'value' }); // Error on extraField

// Make it more permissive:
function updateUser(id: string, updates: Partial<Omit<User, 'id'>> & Record<string, any>) {
  // Now accepts extra properties
}

// Use intersection types to combine required and optional properties
interface RequiredFields {
  name: string;
  age: number;
}

interface OptionalFields {
  email?: string;
  phone?: string;
  address?: string;
}

type User = RequiredFields & OptionalFields & Record<string, any>;

// Now User accepts any extra properties
const user: User = {
  name: 'John',
  age: 30,
  email: '[email protected]',
  customField: 'value' // Allowed due to Record<string, any>
};

// For API responses that may include metadata:
type ApiResponse<T> = {
  data: T;
  success: boolean;
  timestamp: string;
} & Record<string, any>;

interface Product {
  id: string;
  name: string;
  price: number;
}

const response: ApiResponse<Product> = {
  data: { id: '1', name: 'Widget', price: 9.99 },
  success: true,
  timestamp: '2024-01-01',
  metadata: { page: 1, total: 100 }, // Extra properties allowed
  debug: true // Also allowed
};

// Use generics for maximum flexibility
function createConfig<T extends Record<string, any>>(base: T, extras: Record<string, any>) {
  return { ...base, ...extras };
}

const config = createConfig(
  { apiUrl: '/api', timeout: 5000 },
  { retries: 3, debug: true } // No type errors
);