Readonly 型を使用して型をnull可能として宣言する

2024-04-02

TypeScriptで型をnull可能として宣言する方法

TypeScriptでは、変数やプロパティの型をnull可能として宣言できます。これは、変数がnull値を持つ可能性があることをコンパイラに伝えるために重要です。

方法

以下の2つの方法があります。

| null を使用する

最も一般的な方法は、型の後に | null を追加することです。

let name: string | null = null; // 名前は文字列またはnull
let age: number | null = null; // 年齢は数値またはnull

? を使用する

TypeScript 2.0以降では、? 演算子を使用してnull許容型を宣言できます。

let name: string? = null; // 名前は文字列またはnull
let age: number? = null; // 年齢は数値またはnull

どちらの方法でも同じ結果になりますが、コードのスタイルガイドに従ってどちらか一方を選択するのが一般的です。

注意点

null許容型を使用すると、nullチェックを省略できます。
しかし、nullチェックを省略すると、実行時エラーが発生する可能性があります。
確実にnullチェックを行う場合は、! 演算子を使用してnull許容型からnullを取り除くことができます。

例

let name: string | null = null;

// nullチェックを行う
if (name !== null) {
  console.log(name.toUpperCase()); // 大文字に変換
}

// null許容型からnullを取り除く
let upperCaseName = name!.toUpperCase(); // 大文字に変換

// 1. `| null` を使用する

let name: string | null = null; // 名前は文字列またはnull
let age: number | null = null; // 年齢は数値またはnull

// 2. `?` を使用する

let name: string? = null; // 名前は文字列またはnull
let age: number? = null; // 年齢は数値またはnull

// nullチェック

if (name !== null) {
  console.log(`名前: ${name}`); // 名前を出力
} else {
  console.log("名前はnullです"); // 名前がnullであることを出力
}

// null許容型からnullを取り除く

let upperCaseName = name!.toUpperCase(); // 名前を大文字に変換

// 型ガード

function isString(value: string | null): value is string {
  return value !== null;
}

if (isString(name)) {
  console.log(`名前は大文字で ${name.toUpperCase()} です`); // 名前は大文字で出力
} else {
  console.log("名前はnullです"); // 名前がnullであることを出力
}

実行結果

名前はnullです
名前はnullです

解説

このコードでは、name と age という2つの変数を宣言しています。
name は string | null 型で、age は number | null 型です。
これらの変数は、文字列またはnull、数値またはnullを格納できます。
if ステートメントを使用して、name がnullかどうかをチェックしています。
name がnullではない場合は、name を大文字に変換して出力します。
name がnullの場合は、「名前はnullです」というメッセージを出力します。
isString という関数を使用して、value が文字列かどうかを判断しています。

TypeScriptで型をnull可能として宣言する方法

Partial 型は、オブジェクトのすべてのプロパティをnull可能にする型です。

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

let user: Partial<User> = {
  name: "John Doe", // 名前は必須
  age: null, // 年齢はnull
};

この例では、User インターフェースを定義し、name と age という2つのプロパティを持つオブジェクトを表します。

user 変数は Partial<User> 型で宣言され、name プロパティには文字列、age プロパティにはnullが割り当てられています。

Readonly 型は、オブジェクトのプロパティをreadonlyにする型です。

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

let user: Readonly<User> = {
  name: "John Doe", // 名前は必須
  age: null, // 年齢はnull
};

// user.name = "Jane Doe"; // エラー: プロパティはreadonlyです

user.name に値を割り当てようとすると、エラーが発生します。

Record 型は、オブジェクトのキーと値の型を指定して、新しいオブジェクト型を作成する型です。

let user: Record<string, string | null> = {
  name: "John Doe", // 名前は必須
  age: null, // 年齢はnull
};

この例では、Record<string, string | null> 型を使用して、name と age という2つのプロパティを持つオブジェクトを作成しています。

name プロパティは文字列、age プロパティはnullまたは文字列を格納できます。

Union 型を使用する

Union 型は、複数の型を組み合わせて新しい型を作成する型です。

type User = {
  name: string;
  age: number;
} | null;

let user: User = {
  name: "John Doe", // 名前は必須
  age: null, // 年齢はnull
};

let user2: User = null;