TypeScript discriminated unions for exhaustive state modeling

<p>I have API call state with loading, success, and error variants. Using optional fields allows impossible states. I want discriminated unions with full TypeScript narrowing.</p>

<p>Discriminated union state with useReducer:</p> <div class="highlight"><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">AsyncState</span><span class="o">&lt;</span><span class="nx">T</span><span class="o">&gt;</span><span class="w"> </span><span class="o">=</span> <span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">status</span><span class="o">:</span><span class="w"> </span><span class="s1">'idle'</span><span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">status</span><span class="o">:</span><span class="w"> </span><span class="s1">'loading'</span><span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">status</span><span class="o">:</span><span class="w"> </span><span class="s1">'success'</span><span class="p">;</span><span class="w"> </span><span class="nx">data</span><span class="o">:</span><span class="w"> </span><span class="kt">T</span><span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">status</span><span class="o">:</span><span class="w"> </span><span class="s1">'error'</span><span class="p">;</span><span class="w"> </span><span class="nx">error</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="w"> </span><span class="p">};</span> <span class="c1">// TypeScript narrows the type in each case branch:</span> <span class="kd">function</span><span class="w"> </span><span class="nx">render</span><span class="p">(</span><span class="nx">state</span><span class="o">:</span><span class="w"> </span><span class="kt">AsyncState</span><span class="o">&lt;</span><span class="nx">Trace</span><span class="p">[]</span><span class="o">&gt;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">switch</span><span class="w"> </span><span class="p">(</span><span class="nx">state</span><span class="p">.</span><span class="nx">status</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">'idle'</span><span class="o">:</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">p</span><span class="o">&gt;</span><span class="nx">Enter</span><span class="w"> </span><span class="nx">a</span><span class="w"> </span><span class="nx">search</span><span class="w"> </span><span class="nx">query</span><span class="o">&lt;</span><span class="err">/p&gt;;</span> <span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">'loading'</span><span class="o">:</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">Spinner</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">;</span> <span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">'success'</span><span class="o">:</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">TraceList</span><span class="w"> </span><span class="nx">traces</span><span class="o">=</span><span class="p">{</span><span class="nx">state</span><span class="p">.</span><span class="nx">data</span><span class="p">}</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">;</span><span class="w"> </span><span class="c1">// data: Trace[]</span> <span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">'error'</span><span class="o">:</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">ErrorMsg</span><span class="w"> </span><span class="nx">msg</span><span class="o">=</span><span class="p">{</span><span class="nx">state</span><span class="p">.</span><span class="nx">error</span><span class="p">}</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">;</span><span class="w"> </span><span class="c1">// error: string</span> <span class="w"> </span><span class="p">}</span> <span class="p">}</span> <span class="c1">// With useReducer:</span> <span class="kr">type</span><span class="w"> </span><span class="nx">Action</span><span class="w"> </span><span class="o">=</span> <span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="kr">type</span><span class="o">:</span><span class="w"> </span><span class="s1">'FETCH_START'</span><span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="kr">type</span><span class="o">:</span><span class="w"> </span><span class="s1">'FETCH_SUCCESS'</span><span class="p">;</span><span class="w"> </span><span class="nx">data</span><span class="o">:</span><span class="w"> </span><span class="kt">Trace</span><span class="p">[]</span><span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="kr">type</span><span class="o">:</span><span class="w"> </span><span class="s1">'FETCH_ERROR'</span><span class="p">;</span><span class="w"> </span><span class="nx">error</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="w"> </span><span class="p">};</span> <span class="kd">function</span><span class="w"> </span><span class="nx">reducer</span><span class="p">(</span><span class="nx">state</span><span class="o">:</span><span class="w"> </span><span class="kt">AsyncState</span><span class="o">&lt;</span><span class="nx">Trace</span><span class="p">[]</span><span class="o">&gt;</span><span class="p">,</span><span class="w"> </span><span class="nx">action</span><span class="o">:</span><span class="w"> </span><span class="kt">Action</span><span class="p">)</span><span class="o">:</span><span class="w"> </span><span class="nx">AsyncState</span><span class="o">&lt;</span><span class="nx">Trace</span><span class="p">[]</span><span class="o">&gt;</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">switch</span><span class="w"> </span><span class="p">(</span><span class="nx">action</span><span class="p">.</span><span class="kr">type</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">'FETCH_START'</span><span class="o">:</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">status</span><span class="o">:</span><span class="w"> </span><span class="s1">'loading'</span><span class="w"> </span><span class="p">};</span> <span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">'FETCH_SUCCESS'</span><span class="o">:</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">status</span><span class="o">:</span><span class="w"> </span><span class="s1">'success'</span><span class="p">,</span><span class="w"> </span><span class="nx">data</span><span class="o">:</span><span class="w"> </span><span class="kt">action.data</span><span class="w"> </span><span class="p">};</span> <span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">'FETCH_ERROR'</span><span class="o">:</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">status</span><span class="o">:</span><span class="w"> </span><span class="s1">'error'</span><span class="p">,</span><span class="w"> </span><span class="nx">error</span><span class="o">:</span><span class="w"> </span><span class="kt">action.error</span><span class="w"> </span><span class="p">};</span> <span class="w"> </span><span class="nx">default</span><span class="o">:</span><span class="w"> </span><span class="kt">return</span><span class="w"> </span><span class="nx">state</span><span class="p">;</span> <span class="w"> </span><span class="p">}</span> <span class="p">}</span> <span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">state</span><span class="p">,</span><span class="w"> </span><span class="nx">dispatch</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useReducer</span><span class="p">(</span><span class="nx">reducer</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">status</span><span class="o">:</span><span class="w"> </span><span class="s1">'idle'</span><span class="w"> </span><span class="p">});</span> </code></pre></div> <p>Key points: - Discriminated unions make impossible states unrepresentable - switch on state.status enables TypeScript narrowing in each case - Pair with useReducer for complex state machines - Add const _: never = state.status at end of switch for exhaustive check</p>