タグ付きユニオン型を便利に使うテクニックとその注意点

タグ付きユニオン型を便利に使うテクニックとその注意点 2025-11-28 プロによる本気の攻略本『JavaScript/TypeScript実力強化書』 - FL#115

発表者紹介 uhyo 株式会社カオナビフロントエンドエキスパート仕事ではずっとJavaScript/TypeScript一筋。 2

第4章では私の担当分では、タグ付きユニオン型を強力な設計パターンとして紹介しました。 3

This Talk 今回は、タグ付きユニオン型のさらなる応用例として、?: neverを使うテクニックを解説します。ただし、このテクニックには注意点もあるので、そちらも合わせて持ち帰りましょう。 4

タグ付きユニオンの例 type Success<T> = { success: true; value: T };
type Failure<E> = { success: false; error: E }; type Result<T, E> = Success<T> | Failure<E>; Result型の値rに対しては、r.successがtrueか falseかを見ればどちらの型なのか判別できる。 5

不便な点絶対にsuccessをチェックしないとresultやerrorにアクセスできない。 6 // これはOK if (r.success) { console.log(r.value);
} // これはだめ const { success, value } = r; if (success) { console.log(value); }

不便な点絶対にsuccessをチェックしないとresultやerrorにアクセスできない。 7 // これはOK if (r.success) { console.log(r.value);
} // これはだめ const { success, value } = r; if (success) { console.log(value); } successをチェックする前はvalue が存在するかどうか確定していないので、アクセス不可

不便な点を解消するテクニック type Success<T> = { success: true; value: T; error?:
never }; type Failure<E> = { success: false; error: E; value?: never }; type Result<T, E> = Success<T> | Failure<E>; 8

不便な点を解消するテクニック「もう一つの型に存在するフィールド」も、 ?: neverで指定しておくテクニック。これは、「指定不可」という意味を表す。（exactOptionalPropertyTypesコンパイラオプションをオンにしていない場合は、undefinedを指定することも可能） 9

指定不可とは「型に書かれていない」 → 何が入っているか不明（何かが入っている or 何も入っていない）「指定不可」 → 何も入っていないことを保証
10

具体例による比較 type Success<T> = { success: true; value: T };
{ success: true, value: 123 } ←OK { success: true, value: 123 , error: “aaa” } ←これもOK 11

具体例による比較 type Success<T> = { success: true; value: T; error?:
never }; { success: true, value: 123 } ←OK { success: true, value: 123 , error: “aaa” } ←これはエラー 12

「指定不可」の活用なんと、?: never を付けておくとこれがOKになる。 13 const { success, value }
= r; if (success) { console.log(value); }

「指定不可」の活用 OKになる理由: valueが未知の何かである可能性が無くなったから。 • Successの場合: valueはT型 • Failureの場合: valueはundefined型（何も入っていないので）
14 const { success, value } = r; if (success) { console.log(value); }

「指定不可」の活用しかも、このように分割代入してからif文等で型を絞り込むことができる。（TS 4.6から） 15 const { success, value }
= r; if (success) { console.log(value); } ←ここではvalueはT | undefined ←ここではvalueはT

?: neverの利点まとめ SuccessとFailureの両方にvalueを明記しておくことで、型を絞り込む前からアクセス可能になる。しかも、タグ付きユニオン型の利点はキープ。これにより、コードの書きやすさが向上。 16

?: neverの欠点タグ付きユニオン型の絞り込みの方法が曖昧になってしまうこと。 17 // 望ましい方法 if (r.success) {
console.log(r.value); } // こんなやり方もできてしまう if (r.value !== undefined) { console.log(r.value); }

?: neverの欠点絞り込む手段としてsuccessを用意していたのに、他の方法で絞り込む余地が生まれてしまう。これは不注意によるバグや将来の変更によるバグの原因となってしまう。（3つ目のユニオンが追加されたときに意図しない条件分岐になってしまうまど） 18

まとめ ?: never というテクニックを使うことでタグ付きユニオンをもっと便利に使うことができる。しかし、状況を見て使うかどうか決めよう。場合によってはバグの温床となってしまう危険性も。 19

タグ付きユニオン型を便利に使うテクニックとその注意点

タグ付きユニオン型を便利に使うテクニックとその注意点

uhyo

More Decks by uhyo

Other Decks in Technology

Featured

Transcript