TS2345: Argument of type 'X' is not assignable to parameter of type 'Y' の原因と解決策

概要

TS2345: Argument of type 'X' is not assignable to parameter of type 'Y' は、関数やメソッドの引数に期待される型と異なる型の値を渡した際に発生するTypeScriptのコンパイルエラーです。TS2322と似ていますが、こちらは関数の引数に特化したエラーです。

エラーメッセージ

TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
  Type 'undefined' is not assignable to type 'string'.

TS2345: Argument of type '{ name: string; }' is not assignable to parameter of type 'User'.

TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

原因

関数引数の型不一致: 引数の型が関数シグネチャと合わない
オプショナル値の未処理: T | undefined を T を要求する関数に渡している
ジェネリクスの型推論失敗: 型パラメータが意図通りに解決されない
コールバック関数の型不一致: イベントハンドラや高階関数での型ミス
配列メソッドの型問題: filter()やfind()の戻り値型

解決策

1. 型の絞り込みを行う

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
function sendEmail(to: string, subject: string) {
  // 送信処理
}

const email: string | undefined = user.email;

// ❌ TS2345
sendEmail(email, "お知らせ");

// ✅ undefinedを除外してから渡す
if (email !== undefined) {
  sendEmail(email, "お知らせ");
}

// ✅ デフォルト値を使用
sendEmail(email ?? "default@example.com", "お知らせ");

2. Array.filterの型安全な使い方

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
interface User {
  id: number;
  name: string;
  email: string | null;
}

const users: User[] = [
  { id: 1, name: "太郎", email: "taro@example.com" },
  { id: 2, name: "花子", email: null },
];

// ❌ TS2345: filter後もstring | null型のまま
const emails: string[] = users.map((u) => u.email).filter((e) => e !== null);

// ✅ 型述語（type predicate）を使う
const emails: string[] = users
  .map((u) => u.email)
  .filter((e): e is string => e !== null);

3. ジェネリクスに明示的な型引数を指定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
function parseJSON<T>(json: string): T {
  return JSON.parse(json);
}

interface Config {
  port: number;
  host: string;
}

// ❌ 型推論が不十分な場合
const config = parseJSON(rawJson); // unknown型

// ✅ 型引数を明示的に指定
const config = parseJSON<Config>(rawJson);

4. イベントハンドラの型を合わせる

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// ❌ TS2345: イベントの型が合わない
const handleChange = (value: string) => {
  setName(value);
};
<input onChange={handleChange} />;

// ✅ React.ChangeEventを受け取る
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setName(e.target.value);
};
<input onChange={handleChange} />;

// ✅ インラインでイベントを処理
<input onChange={(e) => setName(e.target.value)} />;

5. 関数オーバーロードで柔軟に対応

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// 複数の引数パターンを受け付ける
function format(value: string): string;
function format(value: number): string;
function format(value: string | number): string {
  if (typeof value === "string") {
    return value.trim();
  }
  return value.toFixed(2);
}

// どちらの型でも呼び出せる
format("hello"); // OK
format(42);      // OK

6. satisfiesで型チェックしつつリテラル型を維持

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
type Route = {
  path: string;
  method: "GET" | "POST" | "PUT" | "DELETE";
};

function registerRoute(route: Route) {
  // ルート登録処理
}

// ❌ TS2345: methodがstring型に推論される
const route = { path: "/users", method: "GET" };
registerRoute(route);

// ✅ satisfiesで型チェックしつつリテラル型を維持
const route = { path: "/users", method: "GET" } satisfies Route;
registerRoute(route); // OK

TS2345: Argument of type 'X' is not assignable to parameter of type 'Y'

概要

エラーメッセージ

原因

解決策

1. 型の絞り込みを行う

2. Array.filterの型安全な使い方

3. ジェネリクスに明示的な型引数を指定

4. イベントハンドラの型を合わせる

5. 関数オーバーロードで柔軟に対応

6. satisfiesで型チェックしつつリテラル型を維持

関連エラー

TypeScript の他のエラー