TS2554: Expected X arguments, but got Y - Guide

What is TS2554?

TS2554 occurs when you call a function with the wrong number of arguments. TypeScript strictly enforces function signatures, so you must provide exactly the right number of required arguments.

// Example of TS2554 error
function greet(firstName: string, lastName: string) {
    console.log(`Hello, ${firstName} ${lastName}!`);
}

greet('John'); // Error: Expected 2 arguments, but got 1

Common Causes

1. Missing Required Arguments

function createUser(name: string, email: string, age: number) {
    // ...
}

// ❌ Missing 'age' argument
createUser('John', 'john@example.com'); // Error!

// ✅ All arguments provided
createUser('John', 'john@example.com', 25);

2. Too Many Arguments

function add(a: number, b: number): number {
    return a + b;
}

// ❌ Too many arguments
add(1, 2, 3); // Error: Expected 2 arguments, but got 3

// ✅ Correct number of arguments
add(1, 2);

3. Forgetting to Call with Parentheses

class User {
    getName(): string {
        return 'John';
    }
}

const user = new User();

// ❌ Treating method as property
console.log(user.getName.toUpperCase()); // Error!

// ✅ Call the method first
console.log(user.getName().toUpperCase());

Solutions

1. Provide All Required Arguments

function greet(firstName: string, lastName: string) {
    console.log(`Hello, ${firstName} ${lastName}!`);
}

// ✅ Provide both arguments
greet('John', 'Doe');

2. Use Optional Parameters

// ✅ Make lastName optional with ?
function greet(firstName: string, lastName?: string) {
    if (lastName) {
        console.log(`Hello, ${firstName} ${lastName}!`);
    } else {
        console.log(`Hello, ${firstName}!`);
    }
}

greet('John');         // OK
greet('John', 'Doe');  // OK

3. Use Default Parameters

// ✅ Provide default value
function greet(firstName: string, lastName: string = 'User') {
    console.log(`Hello, ${firstName} ${lastName}!`);
}

greet('John');         // "Hello, John User!"
greet('John', 'Doe');  // "Hello, John Doe!"

4. Use Rest Parameters

// ✅ Accept variable number of arguments
function sum(...numbers: number[]): number {
    return numbers.reduce((a, b) => a + b, 0);
}

sum(1);           // 1
sum(1, 2);        // 3
sum(1, 2, 3, 4);  // 10

5. Function Overloads

// ✅ Multiple function signatures
function greet(name: string): string;
function greet(firstName: string, lastName: string): string;
function greet(first: string, last?: string): string {
    return last ? `Hello, ${first} ${last}!` : `Hello, ${first}!`;
}

greet('John');         // OK
greet('John', 'Doe');  // OK

Real-World Examples

React Component Props

interface ButtonProps {
    label: string;
    onClick: () => void;
    disabled?: boolean; // Optional
}

function Button({ label, onClick, disabled = false }: ButtonProps) {
    return (
        <button onClick={onClick} disabled={disabled}>
            {label}
        </button>
    );
}

// ✅ Required props only
<Button label="Click me" onClick={() => {}} />

// ✅ All props
<Button label="Click me" onClick={() => {}} disabled={true} />

API Functions

// API with optional config
interface FetchOptions {
    method?: string;
    headers?: Record<string, string>;
    body?: string;
}

async function fetchData(url: string, options?: FetchOptions) {
    return fetch(url, options);
}

// ✅ URL only
fetchData('/api/users');

// ✅ With options
fetchData('/api/users', { method: 'POST' });

💡 Pro Tip

When designing APIs, put required parameters first and optional ones last. This makes function calls more intuitive and matches JavaScript conventions.

Summary

TS2554 means wrong number of arguments passed to a function
Make parameters optional with ? when they're not always needed
Use default values for sensible defaults
Use rest parameters (...args) for variable arguments
Consider function overloads for complex APIs