【TypeScript】date?: Date | null の意味をやさしく解説！

でじぼうです。

TypeScriptのコードでよく見かける、下記のプロパティ定義を解説します。

date?: Date | null;
title?: string | null;
count?: number | null;

でじぼう

この記事は下記の方がおすすめ！

? や | null の意味がよくわからない
TypeScriptで「省略OK」と「null OK」の違いをちゃんと理解したい
date?: Date | null の書き方を何となくマネして使っている

どういう意味？
実際に使うとどうなる？
? や | null を設定しないとどうなる？

どういう意味？

これは 「オプショナル（省略可能）＋null許容の型定義」 と呼ばれます。

date?: Date | null;
title?: string | null;
count?: number | null;

上記のプロパティ（date、title、count）は以下のような意味になります。

? → その項目はあってもなくてもOK（＝省略してもいい）
| null → 値が「null」でもOK（空ですよ、という意味）

つまり、date?: Date | null;　の定義は下記のように読めます。
→ date は「日付型の値」でもいいし、「null」でもいいし、「未設定（省略）」でもOK！

実際に使うとどうなる？

たとえば「イベント情報」のデータ型を考えてみましょう。

type Event = {
  name: string;
  date?: Date | null;
  description?: string | null;
};

上記のような型を定義すると、次のように実装できます。

const event1: Event = {
  name: "勉強会",
  date: new Date("2025-07-01"),
  description: "Reactについて学ぶ会"
};

const event2: Event = {
  name: "未定イベント",
  date: null, // 「| null」で許容しているのでOK！！
  // 「？」を付与しているので省略OK！
};

const event3: Event = {
  name: "交流会"
  // dateもdescriptionも、「？」を付与しているので省略OK！
};

? や | null を設定しないとどうなる？

それぞれのプロパティに ? や | null をつけない場合、その値は必ず存在し、nullもNGという扱いになります。

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

上記のような型を定義すると、name も age も「必須」かつ「nullはNG」

どちらも必ず正しい値が必要という意味になり、次のように実装できます。

const user1: User = {
  name: "太郎",
  age: 30,
};

const user2: User = {
  name: "花子",
  // age: がない！ ❌ エラーになる
};

const user3: User = {
  name: "健一",
  age: null, // ❌ エラー：nullは許容されていない
};