TypeScriptで「Type 'null' is not assignable to type 'T'」エラーが発生する理由と解決方法

2024-04-02

TypeScriptで「Type 'null' is not assignable to type 'T'」エラーが発生する理由と解決方法

エラーの原因

TypeScriptは静的型付け言語であるため、変数やプロパティの型を事前に定義する必要があります。例えば、以下のように T 型の変数 x を定義できます。

let x: T;

このとき、x に代入できる値は T 型の値のみです。しかし、null はどの型にも属さないため、x に null を代入しようとすると、上記のエラーが発生します。

エラーの解決方法

このエラーを解決するには、以下の方法があります。

T 型を null を許容する型にする

T 型に null を許容させるには、T | null 型のように null 型をユニオン型として追加します。

let x: T | null;

x = null; // エラーが発生しない

null チェックを行う

x に代入する前に、null かどうかをチェックしてから代入します。

let x: T;

if (value === null) {
  x = null;
} else {
  x = value as T; // 型ガード
}

! 演算子を使用する

! 演算子を使用して、null ではないことを明示的に宣言します。

let x: T;

x = value as T!; // 型ガード

any 型を使用する

すべての型を許容する any 型を使用します。ただし、これは型安全性

let x: any;

x = null; // エラーが発生しない

「Type 'null' is not assignable to type 'T'」エラーは、null を T 型の変数やプロパティに代入しようとしたときに発生します。このエラーを解決するには、上記のいずれかの方法を使用してください。

補足

上記の例では、T 型は具体的な型に置き換えてください。
null 以外にも、undefined も同様に扱われます。
型ガードの詳細については、TypeScript の公式ドキュメントを参照してください。

// 例1: T型をnullを許容する型にする

function example1(value: string | null) {
  let x: string | null;

  x = value; // エラーが発生しない

  if (x === null) {
    // ...
  } else {
    // x は string 型であることが保証される
    console.log(x.toUpperCase());
  }
}

// 例2: nullチェックを行う

function example2(value: number) {
  let x: number;

  if (value === null) {
    x = null;
  } else {
    x = value; // 型ガード
  }

  console.log(x);
}

// 例3: !演算子を使用する

function example3(value: string) {
  let x: string;

  x = value as string!; // 型ガード

  console.log(x.length);
}

// 例4: any型を使用する

function example4(value: any) {
  let x: any;

  x = value; // エラーが発生しない

  console.log(x);
}

example1("Hello");
example1(null);

example2(10);
example2(null);

example3("World");
// example3(null); // エラーが発生する

example4("Hello, World!");
example4(null);

実行方法

上記のコードを ts ファイルとして保存します。
TypeScript コンパイラ (tsc) を使用してコードをコンパイルします。

tsc example.ts

生成された example.js ファイルを実行します。

node example.js

出力結果

HELLO
null
10
null
WORLD
TypeError: Cannot read property 'length' of null
Hello, World!
null

補足

このサンプルコードは、あくまでも参考です。実際のコードでは、必要に応じて修正してください。

型ガードのその他の方法

instanceof 演算子を使用して、オブジェクトの型をチェックできます。

function example5(value: object) {
  if (value instanceof Date) {
    // value は Date 型であることが保証される
    console.log(value.toLocaleDateString());
  } else {
    // ...
  }
}

typeof 演算子を使用して、変数の型を取得できます。

function example6(value: any) {
  if (typeof value === "string") {
    // value は string 型であることが保証される
    console.log(value.toUpperCase());
  } else {
    // ...
  }
}

型パラメーターの制約

ジェネリック型を使用する場合、型パラメーターに制約を設けることで、型ガードを行うことができます。

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

function example7<T extends Person>(value: T) {
  // value は Person 型であることが保証される
  console.log(value.name);
}

カスタム型ガード

独自の型ガード関数を作成することもできます。

function isDate(value: any): value is Date {
  return value instanceof Date && !isNaN(value.getTime());
}

function example8(value: any) {
  if (isDate(value)) {
    // value は Date 型であることが保証される
    console.log(value.toLocaleDateString());
  } else {
    // ...
  }
}