【TypeScript】Union TypeとConditional Typeの組み合わせに注意！Distributive Conditional Typeについて
Distributive Conditional Typeについて、これだけを抜き出した記事が調べてみてもあまり出てこないので、まとめてみようと思います。
結論
ConditionalTypeを使うときは、大体Generic Typeとセットなので、以下の挙動を理解して使いましょう。
（理解していれば、この記事を読む必要はないです。）
type Test1 = boolean extends true ? string : number; // Test1 => number型。
type Hoge2<T extends boolean> = T extends true ? string : number;
type Test2 = Hoge2<boolean>; // Test2 => string | number型。
// それが嫌な時はどうするんだろ。自分はこうしてる。
type Hoge3<T extends boolean> = [T] extends [true] ? string : number;
type Test3 = Hoge3<boolean>; // Test3 => number型。
根拠 => TypeScript: Documentation - Conditional Types
解説
booleanはtrueのサブタイプではないので、以下のConditional TypeはFalse Branchのnumber型になります。
type Test1 = boolean extends true ? string : number; // Test1 => number型。
ところが、このbooleanの部分をGeneric Typeとしてくくりだすと、挙動が変わります。booleanはtrueとfalseのUnion Typeなので、以下のようにstring | number型になります。
type Hoge2<T extends boolean> = T extends true ? string : number;
type Test2 = Hoge2<boolean>;
// => Hoge2<true | false>
// => (true extends true ? string : number) | (false extends true ? string : number) [★ここがdistributive(分配的)なふるまい]
// => string | number
一見奇妙な挙動ですが、ドキュメント「TypeScript: Documentation - Conditional Types」にもちゃんと書かれている挙動です。
例えば、Exclude型を自作するときは便利です。
// see https://github.com/type-challenges/type-challenges/blob/main/questions/00043-easy-exclude/README.md
type MyExclude<T, U extends T> = T extends U ? never : T;
type Test = MyExclude<'a' | 'b' | 'c', 'a' | 'b'>
// => ('a' extends ('a' | 'b') ? never : 'a') | ('b' extends ('a' | 'b') ? never : 'b') | ('c' extends ('a' | 'b') ? never : 'c') [★ここがdistributive(分配的)なふるまい]
// => never | never | 'c'
// => 'c'
Union型に対して反復的な操作をする方法が、私の知る限りではこれしかないので、型パズルを解くときには必須のテクニックです。
もし、extends anyのConditional Typeがあったら、十中八九このDistributiveな振る舞いを狙っています。
type UnionArray<T> = T extends any ? T[] : never;
type Test = UnionArray<string | number> // Test => string[] | number[]
回避策
では、これが原因で問題が起こったら？つまり、Union型をそのままextends判定したかったら、どうすればよいのでしょうか？
自分は、タプル化すると大体うまくいくので、これでしのいでいます。
他にも良い案があったら教えてください。
// Distributiveにしてほしくない時
type Hoge<T extends boolean> = [T] extends [true] ? string : number;
type Test = Hoge<boolean>; // Test => number型。
// Distributiveにしてほしくない時 その2
type ToArray<T> = [T] extends [any] ? T[] : never;
type Test2 = ToArray<string | number> // Test2 => (string | number)[]
ただし、もし上記のようにする場合、ぱっと見て意味が分かりづらいコードなので、その旨をコメントで書いた方が良いですね。
（この記事へのリンクを書いてくれても良いんですよ！！！）
Never型に対するDistributive Conditional Type
Distributive Conditional Typeが原因で、never型は0個の型のUnion型と取られてちょっと不思議な挙動になります。
type Hoge<T extends boolean> = T extends true ? string : number;
type Test = Hoge<never>; // Test => never型
上記のHoge型は、string型かnumber型のどちらかになりそうですが、結果はnever型になります。多分ですが、never型を0個の型のUnion型ととらえているんだと思います。
（記事を書き始めてから調べたら、Typescript never type condition - Stack Overflowとかに書いてました。私もこのanswerと同意見です。）
先ほどと同様に、以下のようにすれば回避できます。
type Hoge<T extends boolean> = [T] extends [true] ? string : number;
type Test = Hoge<never>; // Test => string型
ちなみに、never型は全ての型のサブタイプなので、Conditional TypeでTrue Branchになります。
決してnumber型って書いてから動作確認して気付いたわけではないです。
記事紹介
ここまで読んでいただき、ありがとうございます。
最近、毎週投稿を初めて何とか続いているので、もしよければ他の記事も見て頂けると嬉しいです。
TypeScriptが好きなので、それ関連の投稿をしてます。