TypeScript satisfies operator for type-safe object literals

<p>Defining configuration objects or lookup maps with TypeScript. Using <code>as const</code> loses type checking, using explicit type annotations loses inference of literal types. Need both: type checking AND inference of exact literal values.</p>

<p>Use the <code>satisfies</code> operator (TypeScript 4.9+) to get both type checking and literal type inference:</p> <div class="highlight"><pre><span></span><code><span class="c1">// Problem: 'as const' loses type checking</span> <span class="kd">const</span><span class="w"> </span><span class="nx">config</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">endpoint</span><span class="o">:</span><span class="w"> </span><span class="s1">'https://api.example.com'</span><span class="p">,</span> <span class="w"> </span><span class="nx">timeout</span><span class="o">:</span><span class="w"> </span><span class="s1">'not-a-number'</span><span class="p">,</span><span class="w"> </span><span class="c1">// BUG: should be number, but no error</span> <span class="p">}</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="kd">const</span><span class="p">;</span> <span class="c1">// Problem: explicit type annotation loses literal types</span> <span class="kr">type</span><span class="w"> </span><span class="nx">Config</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">endpoint</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span><span class="w"> </span><span class="nx">timeout</span><span class="o">:</span><span class="w"> </span><span class="kt">number</span><span class="w"> </span><span class="p">};</span> <span class="kd">const</span><span class="w"> </span><span class="nx">config2</span><span class="o">:</span><span class="w"> </span><span class="kt">Config</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">endpoint</span><span class="o">:</span><span class="w"> </span><span class="s1">'https://api.example.com'</span><span class="p">,</span> <span class="w"> </span><span class="nx">timeout</span><span class="o">:</span><span class="w"> </span><span class="kt">5000</span><span class="p">,</span> <span class="p">};</span> <span class="c1">// config2.endpoint is typed as 'string', not 'https://api.example.com'</span> <span class="c1">// SOLUTION: satisfies</span> <span class="kd">const</span><span class="w"> </span><span class="nx">config3</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">endpoint</span><span class="o">:</span><span class="w"> </span><span class="s1">'https://api.example.com'</span><span class="p">,</span> <span class="w"> </span><span class="nx">timeout</span><span class="o">:</span><span class="w"> </span><span class="kt">5000</span><span class="p">,</span> <span class="p">}</span><span class="w"> </span><span class="nx">satisfies</span><span class="w"> </span><span class="nx">Config</span><span class="p">;</span> <span class="c1">// config3.endpoint is typed as 'https://api.example.com' (literal!)</span> <span class="c1">// config3.timeout is typed as 5000 (literal!)</span> <span class="c1">// AND: type checking is enforced at definition</span> <span class="c1">// Real use case: route configuration</span> <span class="kr">type</span><span class="w"> </span><span class="nx">Route</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">path</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span> <span class="w"> </span><span class="nx">handler</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span> <span class="w"> </span><span class="nx">methods</span><span class="o">:</span><span class="w"> </span><span class="p">(</span><span class="s1">'GET'</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">'POST'</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">'PUT'</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">'DELETE'</span><span class="p">)[];</span> <span class="w"> </span><span class="nx">requiresAuth</span><span class="o">:</span><span class="w"> </span><span class="kt">boolean</span><span class="p">;</span> <span class="p">};</span> <span class="kd">const</span><span class="w"> </span><span class="nx">ROUTES</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">traces</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">path</span><span class="o">:</span><span class="w"> </span><span class="s1">'/api/v1/traces'</span><span class="p">,</span> <span class="w"> </span><span class="nx">handler</span><span class="o">:</span><span class="w"> </span><span class="s1">'tracesRouter'</span><span class="p">,</span> <span class="w"> </span><span class="nx">methods</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">'GET'</span><span class="p">,</span><span class="w"> </span><span class="s1">'POST'</span><span class="p">],</span> <span class="w"> </span><span class="nx">requiresAuth</span><span class="o">:</span><span class="w"> </span><span class="kt">true</span><span class="p">,</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="nx">search</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">path</span><span class="o">:</span><span class="w"> </span><span class="s1">'/api/v1/traces/search'</span><span class="p">,</span> <span class="w"> </span><span class="nx">handler</span><span class="o">:</span><span class="w"> </span><span class="s1">'searchRouter'</span><span class="p">,</span> <span class="w"> </span><span class="nx">methods</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">'POST'</span><span class="p">],</span> <span class="w"> </span><span class="nx">requiresAuth</span><span class="o">:</span><span class="w"> </span><span class="kt">false</span><span class="p">,</span> <span class="w"> </span><span class="p">},</span> <span class="p">}</span><span class="w"> </span><span class="nx">satisfies</span><span class="w"> </span><span class="nx">Record</span><span class="o">&lt;</span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">Route</span><span class="o">&gt;</span><span class="p">;</span> <span class="c1">// TypeScript knows exact types:</span> <span class="c1">// ROUTES.traces.methods is ('GET' | 'POST')[], not ('GET'|'POST'|'PUT'|'DELETE')[]</span> <span class="c1">// ROUTES.search.requiresAuth is false, not boolean</span> <span class="c1">// Useful for CSS-in-JS / theme objects</span> <span class="kr">type</span><span class="w"> </span><span class="nx">ThemeColors</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Record</span><span class="o">&lt;</span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="sb">`#</span><span class="si">${</span><span class="kt">string</span><span class="si">}</span><span class="sb">`</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="sb">`rgb(</span><span class="si">${</span><span class="kt">string</span><span class="si">}</span><span class="sb">)`</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">'transparent'</span><span class="o">&gt;</span><span class="p">;</span> <span class="kd">const</span><span class="w"> </span><span class="nx">colors</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">primary</span><span class="o">:</span><span class="w"> </span><span class="s1">'#3B82F6'</span><span class="p">,</span> <span class="w"> </span><span class="nx">secondary</span><span class="o">:</span><span class="w"> </span><span class="s1">'#6B7280'</span><span class="p">,</span> <span class="w"> </span><span class="nx">danger</span><span class="o">:</span><span class="w"> </span><span class="s1">'#EF4444'</span><span class="p">,</span> <span class="p">}</span><span class="w"> </span><span class="nx">satisfies</span><span class="w"> </span><span class="nx">ThemeColors</span><span class="p">;</span> <span class="c1">// colors.primary is typed as '#3B82F6', enables autocomplete and refactoring</span> </code></pre></div> <p><code>satisfies</code> validates the type without widening. Use it when you want the inferred literal type (for autocomplete, refactoring, conditional types) while still enforcing the structural type constraint.</p>