How to fix No overload matches this call in TypeScript

// Example: document.createElement has multiple overloads
declare function createElement(tagName: "div"): HTMLDivElement;
declare function createElement(tagName: "span"): HTMLSpanElement;
declare function createElement(tagName: string): HTMLElement;

// This works - matches first overload
const div = document.createElement("div");

// This fails - "button" doesn't match specific overloads
const button = document.createElement("button"); // Error: No overload matches this call

// Example: Array.from has overloads for different input types
// Overload 1: Array.from<T>(arrayLike: ArrayLike<T>): T[];
// Overload 2: Array.from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];

// WRONG - second argument should be a function
const result1 = Array.from([1, 2, 3], "string"); // Error

// CORRECT - second argument is a mapping function
const result2 = Array.from([1, 2, 3], x => x * 2); // Works

// WRONG - object doesn't match expected interface
function process(options: { name: string }): void;
function process(options: { id: number }): void;

process({ title: "test" }); // Error - no overload matches

// CORRECT - matches one of the overloads
process({ name: "John" }); // Works
process({ id: 123 }); // Works

// Function with overloads
function format(input: string): string;
function format(input: number): number;

// WRONG - union type doesn't match any single overload
function processValue(value: string | number) {
  return format(value); // Error: No overload matches this call
}

// SOLUTION 1: Type narrowing
function processValue(value: string | number) {
  if (typeof value === "string") {
    return format(value); // Works - matches string overload
  } else {
    return format(value); // Works - matches number overload
  }
}

// SOLUTION 2: Add a union overload
function format(input: string): string;
function format(input: number): number;
function format(input: string | number): string | number; // Add union overload
function format(input: any): any {
  // Implementation
}

// SOLUTION 3: Use function overload with generic
function format<T extends string | number>(input: T): T;
function format(input: any): any {
  return input;
}

// Example with fetch API
// fetch has overloads for RequestInfo (string | Request) and optional RequestInit

// WRONG - TypeScript can't infer which overload
const url: string | URL = Math.random() > 0.5 ? "https://api.com" : new URL("https://api.com");
fetch(url); // Error: No overload matches this call

// SOLUTION 1: Type assertion
fetch(url as string); // Assert it's a string
// or
fetch(url as Request); // Assert it's a Request

// SOLUTION 2: Narrow the type
if (typeof url === "string") {
  fetch(url); // Works - matches string overload
} else {
  fetch(url); // Works - matches Request overload
}

// Example with generic constraints
function process<T extends string | number>(value: T): T {
  // Some processing
  return value;
}

// WRONG - TypeScript can't match overload
const result = process(Math.random() > 0.5 ? "text" : 123); // Error

// SOLUTION - Add explicit type parameter
const result = process<string | number>(Math.random() > 0.5 ? "text" : 123);

# Check TypeScript version
npx tsc --version

# Check if library types are installed
npm list @types/library-name

# Update TypeScript
npm install typescript@latest --save-dev

# Update type definitions
npm install @types/library-name@latest --save-dev

# If using a specific version, ensure compatibility
# Check the library's documentation for TypeScript version requirements

https://github.com/DefinitelyTyped/DefinitelyTyped/issues?q=no+overload+matches
https://github.com/microsoft/TypeScript/issues?q=TS2769

// POOR DESIGN - hard to match
function process(data: string, count: number): string;
function process(data: number, prefix: string): number;
function process(data: any, second: any): any {
  // Implementation
}

// BETTER DESIGN - use discriminated unions
type StringInput = { type: "string"; data: string; count: number };
type NumberInput = { type: "number"; data: number; prefix: string };
type ProcessInput = StringInput | NumberInput;

function process(input: ProcessInput): string | number {
  if (input.type === "string") {
    return `${input.data} repeated ${input.count} times`;
  } else {
    return `${input.prefix}${input.data}`;
  }
}

// EVEN BETTER - use function overloads with clearer signatures
function process(data: string, count: number): string;
function process(data: number, prefix: string): number;
function process(data: string | number, second: string | number): string | number {
  if (typeof data === "string") {
    // TypeScript knows second is number here
    return data.repeat(second as number);
  } else {
    // TypeScript knows second is string here
    return `${second}${data}`;
  }
}

// Add a catch-all signature if needed
function process(data: string, count: number): string;
function process(data: number, prefix: string): number;
function process(data: any, second: any): any; // Catch-all
function process(data: any, second: any): any {
  // Implementation
}