This TypeScript error occurs when calling a function that requires 2-3 arguments but you only provide 1. The fix involves either providing all required arguments, making some parameters optional in the function signature, or providing default values for missing arguments.
TypeScript's type system enforces function signatures at compile time, ensuring that functions are called with the correct number and types of arguments. When you call a function with fewer arguments than required by its signature, TypeScript raises error TS2554. This error commonly appears in three scenarios: 1. **Function overloads**: The function has multiple signatures and none match your call pattern 2. **Optional parameters mistyped**: Parameters are required in type definitions but should be optional 3. **Library type definition mismatches**: Third-party type definitions don't match actual runtime behavior The error message "Expected 2-3 arguments, but got 1" specifically indicates that the function accepts either 2 or 3 arguments (with the third being optional), but your code only provides 1. This pattern often appears with event handlers, callback functions, and library APIs where additional optional configuration parameters are supported.
First, identify what arguments the function expects. Hover over the function in your IDE or check the type definitions:
// Example function signature
function myFunction(arg1: string, arg2: number, arg3?: boolean) {
// implementation
}
// WRONG - only provides 1 argument when 2 are required
myFunction("hello"); // Error: Expected 2-3 arguments, but got 1
// CORRECT - provide at least the required arguments
myFunction("hello", 42);
myFunction("hello", 42, true); // Also validLook for the function definition in your codebase or in the library's type definitions (node_modules/@types/...).
Add the additional required arguments to your function call:
// Example with addEventListener
// Signature: addEventListener(type: string, listener: EventListener, options?: AddEventListenerOptions)
const element = document.getElementById("myButton");
// WRONG - missing listener parameter
element?.addEventListener("click"); // Error: Expected 2-3 arguments, but got 1
// CORRECT - provide both required parameters
element?.addEventListener("click", (event) => {
console.log("Button clicked", event);
});
// ALSO CORRECT - with optional third parameter
element?.addEventListener("click", (event) => {
console.log("Button clicked", event);
}, { once: true });If you're unsure what the second parameter should be, check the documentation for the function or library you're using.
Many library functions accept a configuration object as their second or third parameter. If these parameters are optional but typed as required, you can pass an empty object:
// Example with graphql-import (common in GraphQL projects)
import { importSchema } from 'graphql-import';
// WRONG - missing options parameter
const schema = await importSchema('schema.graphql'); // Error
// CORRECT - provide empty object for optional config
const schema = await importSchema('schema.graphql', {});This pattern is common with libraries like:
- Authentication libraries (next-auth, passport)
- GraphQL utilities
- Build tools and compilers
- Configuration-based APIs
If you control the function definition and the extra parameters should be optional, update the signature:
// BEFORE - both parameters required
function processData(data: string, options: Options) {
// implementation
}
processData("test"); // Error: Expected 2 arguments, but got 1
// AFTER - make options parameter optional
function processData(data: string, options?: Options) {
const opts = options || { defaults: true };
// implementation
}
processData("test"); // Now works!
processData("test", { custom: true }); // Also works
// Alternative: provide default value
function processData(data: string, options: Options = {}) {
// implementation
}Use ? for optional parameters or provide default values with =.
If the function has overload signatures, ensure one matches your call pattern:
// BEFORE - no single-argument overload
function connect(host: string, port: number): Connection;
function connect(host: string, port: number, options: Options): Connection;
function connect(host: string, port: number, options?: Options): Connection {
// implementation
}
connect("localhost"); // Error: Expected 2-3 arguments, but got 1
// AFTER - add single-argument overload
function connect(url: string): Connection;
function connect(host: string, port: number): Connection;
function connect(host: string, port: number, options: Options): Connection;
function connect(hostOrUrl: string, port?: number, options?: Options): Connection {
if (!port) {
// Parse URL
return connectUrl(hostOrUrl);
}
// Connect with host and port
return connectSocket(hostOrUrl, port, options);
}
connect("localhost:3000"); // Now works!If you're using a third-party library and the type definitions don't match the runtime behavior, you may need to:
Option 1: Update the @types package
npm update @types/library-name
# or
npm install --save-dev @types/library-name@latestOption 2: Create a local type declaration to override
Create a file types/library-name.d.ts:
// Override incorrect type definitions
declare module 'library-name' {
export function problematicFunction(arg1: string, arg2?: number): void;
}Option 3: Use type assertion as temporary workaround
// Not ideal, but works in a pinch
(myFunction as any)("single-arg");
// or
(myFunction as (arg: string) => void)("single-arg");Report type definition issues to the library maintainers or DefinitelyTyped repository.
### Function Signature Variance
TypeScript uses structural typing to determine function compatibility. A function expecting more parameters can be assigned to a type expecting fewer, but not vice versa:
type Handler1 = (arg1: string) => void;
type Handler2 = (arg1: string, arg2: number) => void;
const fn2: Handler2 = (a, b) => {};
const fn1: Handler1 = fn2; // OK - can ignore extra params
// const fn2b: Handler2 = fn1; // Error - can't add required params### Rest Parameters and Spread Syntax
When using rest parameters, ensure you're spreading arrays correctly:
function combine(a: string, b: string, ...rest: string[]) {
return [a, b, ...rest].join(" ");
}
const args = ["world"];
combine("hello"); // Error: Expected 2-3 arguments, but got 1
combine("hello", ...args); // Correct: spreads to 2 args### React and Event Handlers
React event handlers sometimes show this error when type definitions mismatch:
// React 17 vs 18 type differences
import { MouseEvent } from 'react';
// Older definition might expect (event, target)
// Newer expects just (event)
const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
console.log(event.currentTarget);
};
<button onClick={handleClick}>Click</button>### Next.js and Authentication Libraries
Common in next-auth and similar libraries:
// next-auth v3 vs v4 signature changes
import { signIn } from 'next-auth/react';
// v3 might have required second parameter
signIn('credentials'); // Error in some versions
// v4 makes options optional
signIn('credentials', { redirect: false }); // Safer### GraphQL and Code Generation
GraphQL code generators sometimes create strict signatures:
// Generated resolver signature
type Resolver = (parent: any, args: Args, context: Context) => Promise<Result>;
// WRONG - missing context
const myResolver = (parent: any, args: Args) => {}; // Type error
// CORRECT - provide all parameters even if unused
const myResolver = (parent: any, args: Args, context: Context) => {};Use _ prefix for unused parameters: _parent, _args to indicate they're intentionally ignored.
Function expression requires a return type
Function expression requires a return type
Value of type 'string | undefined' is not iterable
How to fix "Value is not iterable" in TypeScript
Type 'undefined' is not assignable to type 'string'
How to fix "Type undefined is not assignable to type string" in TypeScript
Type narrowing from typeof check produces 'never'
How to fix "Type narrowing produces never" in TypeScript
Type parameter 'T' has conflicting constraints
How to fix "Type parameter has conflicting constraints" in TypeScript