【TypeScript】TS2554の原因と解決方法｜Expected N arguments, but got Mを完全解説

Expected 2 arguments, but got 1. (TS2554)

この記事で学べること

• TS2554エラーの正確な意味とエラーメッセージの読み方
• 引数が多すぎる・少なすぎる場合の基本的な解決方法
• オプショナル引数（?）とデフォルト引数での TS2554 対策
• rest パラメータ（…args）とスプレッド演算子での可変長引数
• 関数オーバーロードで引数の数を柔軟に受け取る方法
• コールバック関数（map / filter / reduce / addEventListener 等）での TS2554
• クラス・コンストラクタ・super() での TS2554 パターン
• React Hooks・コンポーネント Props での TS2554 パターン
• 外部ライブラリのバージョンアップ時の引数変更への対処
• 実務でよくある TS2554 パターン10選と解決アプローチ

Expected N arguments, but got M. (TS2554)

// JavaScriptの場合
function greet(name, greeting) {
  return greeting + ", " + name;
}

// 引数が足りなくても実行される（greeting は undefined）
console.log(greet("太郎"));           // "undefined, 太郎"

// 引数が多くても実行される（余分な引数は無視）
console.log(greet("太郎", "こんにちは", "余分")); // "こんにちは, 太郎"

function greet(name: string, greeting: string): string {
  return greeting + ", " + name;
}

// TS2554: Expected 2 arguments, but got 1.
greet("太郎");

// TS2554: Expected 2 arguments, but got 3.
greet("太郎", "こんにちは", "余分");

JavaScriptとTypeScriptの引数チェックの違い

• JavaScript：引数の数が合わなくても実行時エラーにならない（不足は undefined、余分は無視）
• TypeScript：コンパイル時に引数の数を厳密にチェックし、一致しなければ TS2554 エラーを出す
• この仕組みにより、引数の渡し忘れや余分な引数によるバグを実行前に検出できる

Expected 2 arguments, but got 3. (TS2554)

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

// TS2554: Expected 2 arguments, but got 3.
const result = add(1, 2, 3);

const result = add(1, 2); // OK: 3

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

const result = add(1, 2, 3); // OK: 6

function add(...nums: number[]): number {
  return nums.reduce((sum, n) => sum + n, 0);
}

const result = add(1, 2, 3); // OK: 6
const result2 = add(1, 2, 3, 4, 5); // OK: 15

Expected 2 arguments, but got 1. (TS2554)

function createUser(name: string, age: number): void {
  console.log(`${name}さん（${age}歳）を作成しました`);
}

// TS2554: Expected 2 arguments, but got 1.
createUser("太郎");

createUser("太郎", 25); // OK

function createUser(name: string, age?: number): void {
  if (age !== undefined) {
    console.log(`${name}さん（${age}歳）を作成しました`);
  } else {
    console.log(`${name}さんを作成しました`);
  }
}

createUser("太郎");      // OK: "太郎さんを作成しました"
createUser("太郎", 25); // OK: "太郎さん（25歳）を作成しました"

function createUser(name: string, age: number = 0): void {
  console.log(`${name}さん（${age}歳）を作成しました`);
}

createUser("太郎");      // OK: "太郎さん（0歳）を作成しました"
createUser("太郎", 25); // OK: "太郎さん（25歳）を作成しました"

Expected 0 arguments, but got 1. (TS2554)

function getTimestamp(): number {
  return Date.now();
}

// TS2554: Expected 0 arguments, but got 1.
const ts = getTimestamp("now");

const ts = getTimestamp(); // OK

// Math.max は rest パラメータなので何個でも OK
Math.max(1, 2, 3); // OK

// Math.pow は2引数固定
// TS2554: Expected 2 arguments, but got 3.
Math.pow(2, 3, 4);

// 正しくは
Math.pow(2, 3); // OK: 8

const str = "Hello World";

// startsWith は1〜2引数（第2引数はオプショナル）
str.startsWith("Hello");    // OK
str.startsWith("World", 6); // OK

// TS2554: Expected 1-2 arguments, but got 3.
str.startsWith("Hello", 0, 5);

const multiply = (a: number, b: number): number => a * b;

// TS2554: Expected 2 arguments, but got 1.
multiply(5);

// TS2554: Expected 2 arguments, but got 3.
multiply(2, 3, 4);

// 正しくは
multiply(2, 3); // OK: 6

function greet(name: string, greeting?: string): string {
  if (greeting) {
    return `${greeting}, ${name}!`;
  }
  return `こんにちは, ${name}!`;
}

// どちらも OK
greet("太郎");              // "こんにちは, 太郎!"
greet("太郎", "おはよう"); // "おはよう, 太郎!"

Expected 3 arguments, but got 1. (TS2554)

function sendEmail(to: string, subject: string, body: string): void {
  console.log(`To: ${to}, Subject: ${subject}, Body: ${body}`);
}

// TS2554: Expected 3 arguments, but got 1.
sendEmail("user@example.com");

function sendEmail(to: string, subject?: string, body?: string): void {
  const subj = subject ?? "(件名なし)";
  const b = body ?? "";
  console.log(`To: ${to}, Subject: ${subj}, Body: ${b}`);
}

sendEmail("user@example.com");                                // OK
sendEmail("user@example.com", "お知らせ");                   // OK
sendEmail("user@example.com", "お知らせ", "本文です");      // OK

// オプショナル引数：省略時は undefined
function greetOptional(name: string, prefix?: string): string {
  // prefix は string | undefined 型
  return `${prefix ?? "さん"}：${name}`;
}

// デフォルト引数：省略時はデフォルト値
function greetDefault(name: string, prefix: string = "さん"): string {
  // prefix は string 型（undefined チェック不要）
  return `${prefix}：${name}`;
}

greetOptional("太郎");             // "さん：太郎"
greetOptional("太郎", undefined); // "さん：太郎"

greetDefault("太郎");              // "さん：太郎"
greetDefault("太郎", undefined);  // "さん：太郎" （デフォルト値が適用される）

ポイント：省略時に undefined のまま使いたい場合はオプショナル引数（?）、デフォルト値を設定したい場合はデフォルト引数（= value）を使いましょう。デフォルト引数の方が関数内で undefined チェックが不要になるため、コードがシンプルになります。

// エラー：オプショナル引数が必須引数の前にある
// A required parameter cannot follow an optional parameter. (TS1016)
function badOrder(a?: string, b: number): void {}

// OK：必須引数が先、オプショナル引数が後
function goodOrder(a: string, b?: number): void {}

注意：このルールは TS2554 ではなく TS1016 エラーですが、オプショナル引数の順序を間違えると、結果的に引数の渡し方が複雑になり TS2554 を引き起こす原因にもなります。

function configure(host: string, port?: number, ssl?: boolean): void {
  console.log(`${ssl ? "https" : "http"}://${host}:${port ?? 80}`);
}

// port をスキップして ssl だけ渡したい場合…
// これは意図通りに動かない（true が port に渡される）
// TS2345: Argument of type 'boolean' is not assignable to parameter of type 'number'.
configure("localhost", true);

// 正しくは、undefined を明示的に渡してスキップする
configure("localhost", undefined, true); // OK

interface ConfigOptions {
  host: string;
  port?: number;
  ssl?: boolean;
}

function configure(options: ConfigOptions): void {
  const { host, port = 80, ssl = false } = options;
  console.log(`${ssl ? "https" : "http"}://${host}:${port}`);
}

// 必要なプロパティだけ指定すればOK
configure({ host: "localhost", ssl: true }); // OK: "https://localhost:80"
configure({ host: "localhost", port: 3000 }); // OK: "http://localhost:3000"

ポイント：オプショナル引数が3つ以上ある場合や、途中の引数をスキップしたい場合は、Options パターン（オブジェクト引数）を使うことをおすすめします。これにより TS2554 が発生する可能性を大幅に減らせます。

// 可変長の数値引数を受け取る
function sum(...numbers: number[]): number {
  return numbers.reduce((total, n) => total + n, 0);
}

// 何個でも引数を渡せる
sum(1);                // OK: 1
sum(1, 2);             // OK: 3
sum(1, 2, 3, 4, 5); // OK: 15
sum();                 // OK: 0（空配列）

Expected 3 arguments, but got 5. (TS2554)

function log(level: string, msg1: string, msg2: string): void {
  console.log(`[${level}] ${msg1} ${msg2}`);
}

// TS2554: Expected 3 arguments, but got 5.
log("INFO", "User", "logged", "in", "successfully");

function log(level: string, ...messages: string[]): void {
  console.log(`[${level}] ${messages.join(" ")}`);
}

// 何個でもメッセージを渡せる
log("INFO", "User", "logged", "in", "successfully");
// [INFO] User logged in successfully

log("ERROR", "Connection failed");
// [ERROR] Connection failed

注意：rest パラメータは必ず最後のパラメータに配置する必要があります。function fn(...args: string[], last: number) のような定義はできません。

// タプル型で引数の型と数を厳密に指定
function createRecord(...args: [string, number, boolean]): void {
  const [name, age, active] = args;
  console.log(`${name}, ${age}, ${active}`);
}

createRecord("太郎", 25, true);  // OK

// TS2554: Expected 3 arguments, but got 2.
createRecord("太郎", 25);

// TS2554: Expected 3 arguments, but got 4.
createRecord("太郎", 25, true, "extra");

function query(...args: [string, number?, boolean?]): void {
  const [sql, limit, debug] = args;
  console.log(sql, limit ?? 100, debug ?? false);
}

query("SELECT * FROM users");              // OK
query("SELECT * FROM users", 50);          // OK
query("SELECT * FROM users", 50, true);  // OK

A spread argument must either have a tuple type or be passed to a rest parameter. (TS2556)

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

const nums = [1, 2]; // number[] と推論される

// TS2556: A spread argument must either have a tuple type or be passed to a rest parameter.
add(...nums);

const nums = [1, 2] as const; // readonly [1, 2] と推論される
add(...nums); // OK: 3

const nums: [number, number] = [1, 2];
add(...nums); // OK: 3

function add(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0);
}

const nums = [1, 2];
add(...nums); // OK: 3

function format(template: string, ...values: (string | number)[]): string {
  return template.replace(/{(\d+)}/g, (_, i) => 
    String(values[Number(i)])
  );
}

// template は必須、残りは可変長
format("{0}さんは{1}歳です", "太郎", 25);
// "太郎さんは25歳です"

// TS2554: Expected 1 arguments, but got 0.
// template は必須なので省略するとエラー
format();

rest パラメータまとめ

• ...args: T[] で可変長引数を受け取れる
• rest パラメータは必ず最後のパラメータに配置する
• タプル型の rest パラメータで引数の数と型を厳密に指定できる
• 配列をスプレッドで渡す場合は as const またはタプル型を使う
• 固定パラメータ + rest パラメータの組み合わせが可能

// オーバーロードシグネチャ（呼び出し側から見える型定義）
function convert(value: string): number;
function convert(value: number): string;

// 実装シグネチャ（実際の処理）
function convert(value: string | number): string | number {
  if (typeof value === "string") {
    return Number(value);
  }
  return String(value);
}

convert("123");  // OK: 123 (number)
convert(456);    // OK: "456" (string)

Expected 1-2 arguments, but got 3. (TS2554)

// 1引数または2引数のオーバーロード
function createDate(timestamp: number): Date;
function createDate(year: number, month: number): Date;
function createDate(yearOrTimestamp: number, month?: number): Date {
  if (month !== undefined) {
    return new Date(yearOrTimestamp, month - 1);
  }
  return new Date(yearOrTimestamp);
}

createDate(1700000000000);  // OK
createDate(2024, 3);         // OK

// TS2554: Expected 1-2 arguments, but got 3.
createDate(2024, 3, 15);

function createDate(timestamp: number): Date;
function createDate(year: number, month: number): Date;
function createDate(year: number, month: number, day: number): Date;
function createDate(a: number, b?: number, c?: number): Date {
  if (b !== undefined && c !== undefined) {
    return new Date(a, b - 1, c);
  }
  if (b !== undefined) {
    return new Date(a, b - 1);
  }
  return new Date(a);
}

createDate(2024, 3, 15); // OK

function process(value: string): string;
function process(value: number): number;
// 実装シグネチャ（3引数を受け取れるが、呼び出しには使えない）
function process(value: string | number, extra?: boolean, debug?: boolean): string | number {
  return value;
}

// オーバーロードシグネチャはどちらも1引数なので...
// TS2554: Expected 1 arguments, but got 2.
process("hello", true);

function process(value: string): string;
function process(value: number): number;
function process(value: string, extra: boolean): string;
function process(value: string | number, extra?: boolean): string | number {
  return value;
}

process("hello", true); // OK

// オーバーロードを使わなくてもよい（型だけ異なる）
function stringify(value: string | number | boolean): string {
  return String(value);
}

stringify("hello"); // OK
stringify(42);      // OK
stringify(true);    // OK

ポイント：オーバーロードはコードが複雑になりやすいので、ユニオン型やオプショナル引数で解決できる場合はそちらを優先しましょう。オーバーロードが必要なのは「引数の数が異なり、かつ戻り値の型が引数パターンごとに異なる」場合です。

const numbers = [1, 2, 3];

// map のコールバックは (value, index, array) の3引数だが…
// 使わない引数は省略してOK
numbers.map((n) => n * 2);          // OK: 1引数だけ使う
numbers.map((n, i) => n + i);       // OK: 2引数使う
numbers.map((n, i, arr) => n + i); // OK: 3引数すべて使う

Expected 1 arguments, but got 3. (TS2554)

// カスタムのコールバック型を定義
type Callback = (value: number) => void;

function execute(cb: Callback): void {
  cb(42);
}

// この関数は2引数を要求する
function handler(value: number, label: string): void {
  console.log(label, value);
}

// Callback型は1引数しか渡さないので、handler（2引数）と互換性がない場合がある
// ただし、TypeScriptでは引数が少ないコールバックは互換性があるとみなされる
// （逆に引数が多いコールバックは互換性がない場合がある）
execute(handler); // strictFunctionTypes が有効だとエラーになる場合がある

// addEventListener は2〜3引数
const button = document.getElementById("btn");

// OK: 2引数（イベント名, コールバック）
button?.addEventListener("click", (e) => {
  console.log(e.target);
});

// OK: 3引数（イベント名, コールバック, オプション）
button?.addEventListener("click", (e) => {
  console.log(e.target);
}, { once: true });

// TS2554: Expected 2-3 arguments, but got 1.
button?.addEventListener("click");

const promise = new Promise<string>((resolve) => {
  resolve("成功");
});

// OK: then に1引数のコールバック
promise.then((result) => console.log(result));

// OK: then に2引数（onFulfilled, onRejected）
promise.then(
  (result) => console.log(result),
  (error) => console.error(error)
);

// Promise コンストラクタの executor は resolve と reject の2引数
// TS2554: Expected 1-2 arguments, but got 0. （resolve を呼び忘れたケース）
const p = new Promise<string>((resolve) => {
  // resolve() を呼ばずに return してしまう
  // resolve に引数を渡し忘れ
  resolve(); // TS2554: Expected 1 arguments, but got 0.
});

// Promise<string> なので resolve に string を渡す
const p = new Promise<string>((resolve) => {
  resolve("成功"); // OK
});

// 引数なしの resolve にしたい場合は Promise<void>
const p2 = new Promise<void>((resolve) => {
  resolve(); // OK
});

// OK: 標準的な使い方
setTimeout(() => {
  console.log("1秒後");
}, 1000);

// OK: 遅延時間を省略（0ms として扱われる）
setTimeout(() => {
  console.log("すぐ実行");
});

// setTimeout に追加の引数を渡すこともできる（コールバックの引数になる）
setTimeout((msg: string) => {
  console.log(msg);
}, 1000, "Hello"); // OK: "Hello" がコールバックの msg に渡される

Expected 2 arguments, but got 1. (TS2554)

type EventHandler = (event: string, data: unknown) => void;

function on(eventName: string, handler: EventHandler): void {
  // イベント発火時にコールバックを呼ぶ
  handler(eventName, { timestamp: Date.now() });
}

// コールバックで event だけ使い、data を無視するのは OK
on("click", (event) => {
  console.log(event); // OK: 引数が少ないのは許容される
});

// しかし、handler を呼び出す側が引数を足りなく渡すとエラー
function onBroken(eventName: string, handler: EventHandler): void {
  // TS2554: Expected 2 arguments, but got 1.
  handler(eventName); // data が足りない
}

// 方法1：コールバック呼び出し時に引数を正しく渡す
function onFixed(eventName: string, handler: EventHandler): void {
  handler(eventName, { timestamp: Date.now() }); // OK
}

// 方法2：コールバック型の引数をオプショナルにする
type EventHandlerOptional = (event: string, data?: unknown) => void;

コールバック関数の引数ルールまとめ

• コールバックの引数は少なく定義してもOK（余分な引数は無視される）
• コールバックを呼び出す側は、定義された引数をすべて渡す必要がある
• Promise<T> の resolve には T 型の値を渡す必要がある（void 以外）
• addEventListener は2〜3引数で、コールバック省略はできない

Expected 2 arguments, but got 0. (TS2554)

class User {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// TS2554: Expected 2 arguments, but got 0.
const user1 = new User();

// TS2554: Expected 2 arguments, but got 1.
const user2 = new User("太郎");

const user = new User("太郎", 25); // OK

class User {
  name: string;
  age: number;

  constructor(name: string, age: number = 0) {
    this.name = name;
    this.age = age;
  }
}

const user = new User("太郎"); // OK: age は 0

Expected 2 arguments, but got 3. (TS2554)

class Point {
  constructor(public x: number, public y: number) {}
}

// TS2554: Expected 2 arguments, but got 3.
const p = new Point(1, 2, 3); // 3D座標を渡そうとしている

class Point3D {
  constructor(
    public x: number,
    public y: number,
    public z: number
  ) {}
}

const p = new Point3D(1, 2, 3); // OK

Expected 2 arguments, but got 0. (TS2554)

class Animal {
  constructor(public name: string, public age: number) {}
}

class Dog extends Animal {
  breed: string;

  constructor(breed: string) {
    // TS2554: Expected 2 arguments, but got 0.
    super(); // Animal のコンストラクタには name と age が必要
    this.breed = breed;
  }
}

class Dog extends Animal {
  breed: string;

  constructor(name: string, age: number, breed: string) {
    super(name, age); // OK: 親クラスの引数を渡す
    this.breed = breed;
  }
}

const dog = new Dog("ポチ", 3, "柴犬"); // OK

class Logger {
  // コンストラクタを明示的に定義していない = 0引数
  log(message: string): void {
    console.log(message);
  }
}

// TS2554: Expected 0 arguments, but got 1.
const logger = new Logger("debug");

// 正しくは
const logger2 = new Logger(); // OK

class Product {
  constructor(
    public name: string,
    public price: number,
    public category: string
  ) {}
}

// ファクトリ関数でコンストラクタ引数を中継
function createProduct(
  name: string,
  price: number,
  category: string = "一般"
): Product {
  return new Product(name, price, category);
}

// ファクトリ関数は category にデフォルト値があるので2引数でもOK
createProduct("りんご", 300);            // OK
createProduct("りんご", 300, "食品"); // OK

ポイント：コンストラクタの引数が多い場合は、Options パターン（オブジェクト引数）を使うとミスを減らせます。特に4つ以上の引数がある場合は、オブジェクトにまとめることを検討しましょう。

interface UserOptions {
  name: string;
  age: number;
  email?: string;
  role?: "admin" | "user";
}

class User {
  name: string;
  age: number;
  email: string;
  role: string;

  constructor(options: UserOptions) {
    this.name = options.name;
    this.age = options.age;
    this.email = options.email ?? "";
    this.role = options.role ?? "user";
  }
}

// 必要なプロパティだけ指定すればOK（引数は常に1つ）
const user = new User({ name: "太郎", age: 25 }); // OK
const admin = new User({ name: "管理者", age: 30, role: "admin" }); // OK

import { useState } from "react";

// OK: 初期値あり（型は自動推論される）
const [count, setCount] = useState(0);

// OK: 初期値なし（型を明示的に指定）
const [name, setName] = useState<string>();

// OK: 初期値に関数を渡す（lazy initialization）
const [data, setData] = useState(() => computeInitial());

// TS2554: Expected 0-1 arguments, but got 2.
const [value, setValue] = useState(0, "extra");

import { useEffect } from "react";

// OK: エフェクト関数のみ（毎回実行）
useEffect(() => {
  console.log("レンダリングされました");
});

// OK: エフェクト関数 + 依存配列
useEffect(() => {
  console.log(`count: ${count}`);
}, [count]);

// OK: 空の依存配列（マウント時のみ実行）
useEffect(() => {
  console.log("マウントされました");
}, []);

// TS2554: Expected 1-2 arguments, but got 3.
useEffect(() => {}, [], "extra");

Expected 2 arguments, but got 1. (TS2554)

import { useCallback, useMemo } from "react";

// TS2554: Expected 2 arguments, but got 1.
const handleClick = useCallback(() => {
  console.log("clicked");
}); // 依存配列が足りない！

// TS2554: Expected 2 arguments, but got 1.
const expensive = useMemo(() => {
  return heavyComputation();
}); // 依存配列が足りない！

const handleClick = useCallback(() => {
  console.log("clicked");
}, []); // OK: 空の依存配列

const expensive = useMemo(() => {
  return heavyComputation(count);
}, [count]); // OK: count が変わったら再計算

// カスタムフック（初期は1引数だった）
function useFetch(url: string): { data: unknown; loading: boolean } {
  // ...
  return { data: null, loading: false };
}

// フック作者がオプションパラメータを追加（必須に変更してしまった）
function useFetchV2(url: string, options: RequestInit): { data: unknown; loading: boolean } {
  // ...
  return { data: null, loading: false };
}

// 既存の呼び出しが壊れる
// TS2554: Expected 2 arguments, but got 1.
const { data } = useFetchV2("/api/users");

function useFetch(url: string, options?: RequestInit): { data: unknown; loading: boolean } {
  // ...
  return { data: null, loading: false };
}

const { data } = useFetch("/api/users"); // OK
const { data: d2 } = useFetch("/api/users", { method: "POST" }); // OK

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

const Button = ({ label, onClick }: ButtonProps) => (
  <button onClick={onClick}>{label}</button>
);

// JSX として使う場合はTS2554にはならない
// （Props は JSX 属性として渡される）
<Button label="クリック" onClick={() => {}} /> // OK

// 関数として直接呼ぶとTS2554の可能性
// TS2554: Expected 1 arguments, but got 0.
Button(); // Props なしで呼ぶとエラー

import React from "react";

// ハンドラに追加の引数を渡したい場合
function handleDelete(id: number, event: React.MouseEvent): void {
  event.preventDefault();
  console.log(`Delete item ${id}`);
}

// onClick は (event) => void なので、handleDelete(id, event) を直接渡せない
// アロー関数でラップする
<button onClick={(e) => handleDelete(123, e)}>削除</button> // OK

// OK: タグ名のみ
React.createElement("div");

// OK: タグ名 + props
React.createElement("div", { className: "container" });

// OK: タグ名 + props + children
React.createElement("div", { className: "container" }, "Hello");

// TS2554: Expected 1 arguments, but got 0.
React.createElement(); // タグ名が必要

React での TS2554 まとめ

• useCallback / useMemo は依存配列が必須（2引数）
• useEffect は1〜2引数（依存配列はオプショナル）
• useState は0〜1引数（初期値はオプショナル）
• カスタムフックの引数変更時は破壊的変更にならないようオプショナルにする
• イベントハンドラに追加引数を渡す場合はアロー関数でラップする

// ライブラリの旧バージョン（v1）
// function connect(host: string, port: number): Connection;

// ライブラリの新バージョン（v2）- 引数がオブジェクトに変更された
// function connect(options: ConnectionOptions): Connection;

// v1 の呼び出しコードがそのまま残っている
// TS2554: Expected 1 arguments, but got 2.
connect("localhost", 3000);

// v2 の正しい呼び出し
connect({ host: "localhost", port: 3000 }); // OK

注意：ライブラリをアップデートした後にTS2554が大量に発生した場合は、まずライブラリのマイグレーションガイドやCHANGELOGを確認しましょう。APIの引数が変更されている可能性が高いです。

# ライブラリと@typesのバージョンを確認
npm list express @types/express

# @types を最新に更新
npm install @types/express@latest

# または特定バージョンに合わせる
npm install @types/express@4.18

// ライブラリの新API
// declare function connect(options: ConnectionOptions): Connection;

// 旧APIと同じインターフェースのラッパー関数
function connectLegacy(host: string, port: number): Connection {
  return connect({ host, port });
}

// 既存のコードはラッパーを使う（段階的に移行）
connectLegacy("localhost", 3000); // OK

// Before: 引数省略不可
function search(query: string, limit: number, offset: number): Result[] { ... }

// After: limit と offset を省略可能に
function search(query: string, limit?: number, offset?: number): Result[] {
  const l = limit ?? 10;
  const o = offset ?? 0;
  // ...
}

function search(query: string, limit: number = 10, offset: number = 0): Result[] {
  // limit と offset は常に number 型（undefined チェック不要）
  // ...
}

search("TypeScript");         // OK: limit=10, offset=0
search("TypeScript", 20);     // OK: limit=20, offset=0
search("TypeScript", 20, 5); // OK: limit=20, offset=5

function merge<T>(...objects: Partial<T>[]): T {
  return Object.assign({}, ...objects) as T;
}

// 何個でもオブジェクトを渡せる
merge({ a: 1 }, { b: 2 }, { c: 3 }); // OK

function createElement(tag: "input"): HTMLInputElement;
function createElement(tag: "div", className: string): HTMLDivElement;
function createElement(tag: string, className?: string): HTMLElement {
  const el = document.createElement(tag);
  if (className) el.className = className;
  return el;
}

// Bad: 引数が多く、順序を間違えやすい
function createUser(
  name: string,
  age: number,
  email: string,
  role: string,
  active: boolean
): User { ... }

// Good: Options パターン
interface CreateUserOptions {
  name: string;
  age: number;
  email: string;
  role?: "admin" | "user";
  active?: boolean;
}

function createUser(options: CreateUserOptions): User {
  const { name, age, email, role = "user", active = true } = options;
  // ...
}

// 引数の順序を気にせず、必要なものだけ渡せる
createUser({
  name: "太郎",
  age: 25,
  email: "taro@example.com",
}); // OK: role と active はデフォルト値

// axios v0.x: axios(url, config) - 2引数
// axios v1.x: axios(config) - 1引数（urlはconfigの中）

// 旧コード → TS2554の可能性
// 解決策：マイグレーションガイドに従って更新
axios({ url: "/api/users", method: "GET" }); // 新しいAPI

type Handler = (req: Request, res: Response) => void;

function route(path: string, handler: Handler): void {
  // handler を呼ぶ際に引数を正しく渡す
  handler(req, res); // OK: 2引数

  // TS2554: Expected 2 arguments, but got 1.
  handler(req); // res を渡し忘れ
}

class HttpError extends Error {
  statusCode: number;

  constructor(statusCode: number, message: string) {
    // TS2554: Expected 0-1 arguments, but got 0.
    // super(); ← message を渡し忘れ

    super(message); // OK: Error のコンストラクタに message を渡す
    this.statusCode = statusCode;
  }
}

function greet(greeting: string, name: string): string {
  return `${greeting}, ${name}!`;
}

// call: 第1引数は this、残りは関数の引数
greet.call(null, "Hello", "太郎"); // OK

// TS2554: Expected 3 arguments, but got 2.
greet.call(null, "Hello"); // name が足りない

// apply: 第2引数は配列
greet.apply(null, ["Hello", "太郎"]); // OK

// bind: 部分適用
const greetHello = greet.bind(null, "Hello");
greetHello("太郎"); // OK: "Hello, 太郎!"

// TS2554: Expected 2 arguments, but got 1.
const memoized = useMemo(() => expensiveCalc(data));

// 修正：依存配列を追加
const memoized = useMemo(() => expensiveCalc(data), [data]);

// TS2554: Expected 1 arguments, but got 0.
const p = new Promise<string>((resolve) => {
  resolve(); // string を渡す必要がある
});

// 修正
const p = new Promise<string>((resolve) => {
  resolve("done"); // OK
});

const args = [1, 2]; // number[] と推論

// TS2556: A spread argument must either have a tuple type
Math.max(...args);

// 修正：as const でタプルにする
const args2 = [1, 2] as const;
Math.max(...args2); // OK

function identity<T>(value: T): T {
  return value;
}

// 型引数と通常引数は別物
identity<string>("hello"); // OK: 型引数1つ + 通常引数1つ

// TS2554: Expected 1 arguments, but got 2.
identity("hello", 42); // 通常引数は1つだけ

type Action =
  | { type: "SET_NAME"; payload: string }
  | { type: "SET_AGE"; payload: number };

function dispatch(action: Action): void { ... }

// TS2554: Expected 1 arguments, but got 2.
dispatch("SET_NAME", "太郎"); // Redux風だが、引数はオブジェクト1つ

// 修正
dispatch({ type: "SET_NAME", payload: "太郎" }); // OK

// 実際の関数は3引数
function fetchData(url: string, method: string, headers: Record<string, string>): Promise<unknown> {
  // ...
}

// テストで呼ぶ際に引数を省略してしまう
// TS2554: Expected 3 arguments, but got 1.
fetchData("/api/test");

// 修正：テスト用のデフォルト値を用意
fetchData("/api/test", "GET", {}); // OK

TS2554 エラー解決のポイント

• エラーメッセージを正確に読む：Expected N（期待値）と got M（実際の値）を確認する
• 引数が多い場合：余分な引数を削除する、または rest パラメータで可変長にする
• 引数が少ない場合：不足引数を追加する、またはオプショナル / デフォルト引数にする
• オプショナル引数（?）：省略時は undefined、デフォルト引数と使い分ける
• rest パラメータ（…args）：可変長引数を型安全に受け取れる
• オーバーロード：異なる引数パターンで異なる戻り値を返す場合に使う
• Options パターン：引数が多い場合はオブジェクトにまとめるのがベストプラクティス
• React Hooks：useCallback / useMemo は依存配列（第2引数）が必須
• 外部ライブラリ：バージョンアップ後はCHANGELOGを確認する
• スプレッド展開：as const でタプル型にすると固定引数関数にも渡せる

関連記事

• TypeScript 型の書き方 完全入門 – 型注釈の基本から応用まで
• TypeScript 関数の型定義 完全ガイド – 関数の引数・戻り値の型定義
• TypeScript よくあるエラーと解決方法 – エラーコード別の対処法
• TS2322の原因と解決方法 – 代入時の型不一致エラー
• TS2339の原因と解決方法 – プロパティが存在しないエラー
• TS2345の原因と解決方法 – 引数の型不一致エラー
• TS7006の原因と解決方法 – 暗黙的 any 型のエラー
• TS2304の原因と解決方法 – 名前が見つからないエラー
• TS2531・TS2532の原因と解決方法 – null/undefined の可能性エラー
• TS2307の原因と解決方法 – モジュールが見つからないエラー