Ceeds Academy教材アプリ教材・症状語・タグで検索
索引グラフ試す
プログラミング言語▸TypeScript

TypeScript: ユニオン型と絞り込み(union / narrowing)

hands-on所要 25分最新草稿
前提: TypeScript: オブジェクトと型定義(interface / type)→次: TypeScript: 非同期処理(Promise / async-await)
意味グラフ(この教材と内容的に近い教材・1ネスト)
例え(Analogies)
ユニオン型=仕分け前の箱

number | string は「数字か文字のどちらか」が入った箱。開けて中身を確かめて(typeof)から、種類に応じた扱いをする。確かめずに触ると危ない。

概要

📍 programming-languages ▸ TypeScript ▸ ユニオン型と絞り込み | 種別: hands-on | facts_as_of 2026-06(TypeScript 6.0)

公式ドキュメント — hands-on

🎞 スライド

ユニオン型と絞り込み

「どれか」を安全に扱う

絞り込み(テキスト図)

id: number | string
│ typeof で分岐
┌────┴────┐
string number
.toUpperCase() OK そのまま使う
↑ 絞り込む前は両方の型として扱えない

null も絞り込む

v?.length … v が null なら undefined(落ちない)
v ?? "default" … null/undefined のとき既定値

—
出典(sources)

TypeScript Handbook (Narrowing, Unions) ; TypeScript 6.0 / 2026-06確認

確認問題(Review-Questions)
number か string を取る型 Id を定義せよ。コード
基礎公式
解答・解説▾ 開く

type Id = number | string;

ユニオン型を安全に使うには何が必要か。理由も。記述
基礎公式
解答・解説▾ 開く

narrowing(typeof等で型を絞り込む)。型ごとに使えるプロパティ/メソッドが異なるため。

目次
例え概要公式ドキュメント出典確認問題
鮮度
最新
更新: 2026-06-15
次回棚卸し: 2026-12-15
周期: 6か月
版: TypeScript 6.0

概要

「複数の型のどれか」を表すユニオン型(A | B)。使う前に typeof 等で型を絞り込む(narrowing)と安全に扱える。

公式ドキュメント準拠(TypeScript 6.0)

エディタを読み込み中…
  • ユニオンは絞り込んでから各型の機能を使う。?.(オプショナルチェーン)と ??(null 合体)で null/undefined を安全に扱う。

出典: TS Handbook: Narrowing

🧭 誤解訂正集

よくある誤解 正しい理解
ユニオンならどの機能も使える 絞り込む前は共通部分しか使えない
null チェックは if だけ ?. / ?? で簡潔に書ける
リテラル型はただの文字列 "up" / "down" のように値そのものを型にできる

📖 用語

  • ユニオン型 … A | B。複数の型のどれか。
  • 絞り込み(narrowing) … typeof 等で実際の型を1つに確定すること。
  • リテラル型 … "up" など値そのものを型にしたもの。
  • オプショナルチェーン(?.) … null/undefined なら処理を止めて undefined を返す。
  • null 合体(??) … 左が null/undefined のとき右を使う。

✅ 確認の目安(can-do)

ユニオン型を typeof 等で絞り込む流れを説明でき、?. と ?? の使い所を踏まえて、**「ここで安全に使うにはどう絞り込むか」**を判断できる。

⚠️ エラー復旧集

症状 原因 復旧
'x' is possibly 'null' null の可能性 絞り込み or ?. / ?? で対応
Property does not exist on type(ユニオン型) 未絞り込み typeof 等で絞り込んでから使う