TypeScript Type ‘X’ is not assignable to type ‘Y’ の原因と解決方法

Type ‘X’ is not assignable to type ‘Y’ とは

TypeScriptで「Type ‘X’ is not assignable to type ‘Y’」は最も頻繁に遭遇するコンパイルエラーです。型安全を保証するTypeScriptの中核機能である型チェックにより、互換性のない型の代入を検出した場合に発生します。TypeScript開発で避けて通れない基本的なエラーであり、正しい型の扱い方を理解することが重要です。

エラーの発生パターン

このエラーは主に以下のようなケースで発生します。

パターン1: 基本型の不一致

let count: number = "hello";
// Type 'string' is not assignable to type 'number'

変数countはnumber型として宣言されていますが、string型の値を代入しようとしているためエラーが発生します。TypeScriptでは型が厳密にチェックされるため、暗黙の型変換は行われません。

// 修正例1: 正しい型の値を代入
let count: number = 42;

// 修正例2: 型を変更
let count: string = "hello";

// 修正例3: ユニオン型を使用
let count: number | string = "hello";

パターン2: オブジェクト型のプロパティ不足

interface User {
  name: string;
  age: number;
}

const user: User = { name: "Alice" };
// Type '{ name: string; }' is not assignable to type 'User'.
// Property 'age' is missing

Userインターフェースではageが必須プロパティですが、オブジェクトにageが含まれていないためエラーが発生します。

// 修正例1: 不足しているプロパティを追加
const user: User = { name: "Alice", age: 30 };

// 修正例2: プロパティをオプショナルにする
interface User {
  name: string;
  age?: number;  // ? でオプショナルに
}
const user: User = { name: "Alice" };

パターン3: null/undefinedの代入

// strictNullChecks が有効な場合
let name: string = null;
// Type 'null' is not assignable to type 'string'

strictNullChecksが有効な場合、nullやundefinedを通常の型に代入できません。型安全のために、nullの可能性を明示的に示す必要があります。

// 修正例1: ユニオン型でnullを許容
let name: string | null = null;

// 修正例2: undefinedを許容
let name: string | undefined = undefined;

// 修正例3: オプショナルチェーンで安全にアクセス
const len = name?.length ?? 0;

根本原因の特定方法

エラーメッセージの「Type ‘X’ is not assignable to type ‘Y’」を注意深く読みます。Xが実際に渡された値の型、Yが期待される型です。VSCodeなどのIDEでは変数にホバーすると推論された型が表示されるため、型の確認に活用してください。

// 型の確認方法
// VSCodeで変数にホバーすると推論された型が表示される

// typeof で実行時の型を確認
console.log(typeof myValue);

// as const で型を固定して確認
const config = { mode: "dev" } as const;
// config.mode の型は "dev"（リテラル型）になる

防止策とベストプラクティス

型エラーを未然に防ぐには、変数や関数の引数に適切な型注釈をつけることが基本です。ユニオン型、ジェネリクス、型ガードを活用することで、柔軟かつ安全な型定義が可能です。

// 防止策まとめ
// 1. 適切な型注釈
function greet(name: string): string {
  return `Hello, ${name}`;
}

// 2. ユニオン型でnullを許容
function findUser(id: number): User | null {
  // ...
  return null;
}

// 3. 型ガードで安全に処理
function process(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed(2));
  }
}

Stack Overflowでの質問状況

Stack Overflowでは、TypeScriptに関する質問が約236,011件投稿されており、Type ‘X’ is not assignable to type ‘Y’は最も頻繁に質問されるエラーカテゴリの一つです。

よくある質問（FAQ）