TypeScript strict mode configuration and common fixes

<p>I enabled TypeScript strict mode and now have many type errors. I need to understand what strict mode enables, how to fix common errors (possibly undefined, implicit any), and how to migrate existing code incrementally.</p>

<p>TypeScript strict mode and fixes:</p> <div class="highlight"><pre><span></span><code><span class="c1">// tsconfig.json</span> <span class="p">{</span> <span class="w"> </span><span class="nt">"compilerOptions"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"strict"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w"> </span><span class="c1">// Enables all strict checks</span> <span class="w"> </span><span class="c1">// Equivalent to:</span> <span class="w"> </span><span class="c1">// "strictNullChecks": true, -- no implicit null/undefined</span> <span class="w"> </span><span class="c1">// "noImplicitAny": true, -- no implicit any type</span> <span class="w"> </span><span class="c1">// "strictFunctionTypes": true, -- stricter function typing</span> <span class="w"> </span><span class="c1">// "strictPropertyInitialization": true</span> <span class="w"> </span><span class="p">}</span> <span class="p">}</span> </code></pre></div> <p>Common fixes:</p> <div class="highlight"><pre><span></span><code><span class="c1">// 1. strictNullChecks: T | undefined issues</span> <span class="kd">function</span><span class="w"> </span><span class="nx">getTrace</span><span class="p">(</span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">)</span><span class="o">:</span><span class="w"> </span><span class="nx">Trace</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="kc">null</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="p">}</span> <span class="kd">const</span><span class="w"> </span><span class="nx">trace</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getTrace</span><span class="p">(</span><span class="s1">'123'</span><span class="p">);</span> <span class="c1">// Error: Object is possibly null</span> <span class="nx">trace</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span><span class="w"> </span><span class="c1">// WRONG</span> <span class="nx">trace</span><span class="o">?</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span><span class="w"> </span><span class="c1">// OK -- optional chaining</span> <span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">trace</span><span class="p">)</span><span class="w"> </span><span class="nx">trace</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span><span class="w"> </span><span class="c1">// OK -- type guard</span> <span class="nx">trace</span><span class="o">!</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span><span class="w"> </span><span class="c1">// OK -- non-null assertion (use sparingly)</span> <span class="c1">// 2. noImplicitAny: parameter types required</span> <span class="c1">// WRONG: Parameter 'item' implicitly has an 'any' type</span> <span class="kd">function</span><span class="w"> </span><span class="nx">process</span><span class="p">(</span><span class="nx">item</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="p">}</span> <span class="c1">// RIGHT:</span> <span class="kd">function</span><span class="w"> </span><span class="nx">process</span><span class="p">(</span><span class="nx">item</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="p">...</span><span class="w"> </span><span class="p">}</span> <span class="kd">function</span><span class="w"> </span><span class="nx">process</span><span class="p">(</span><span class="nx">item</span><span class="o">:</span><span class="w"> </span><span class="kt">unknown</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c1">// For truly unknown input</span> <span class="c1">// 3. Array access possibly undefined:</span> <span class="kd">const</span><span class="w"> </span><span class="nx">items</span><span class="o">:</span><span class="w"> </span><span class="kt">Trace</span><span class="p">[]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[];</span> <span class="kd">const</span><span class="w"> </span><span class="nx">first</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">items</span><span class="p">[</span><span class="mf">0</span><span class="p">];</span><span class="w"> </span><span class="c1">// Type: Trace | undefined in strict mode</span> <span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">first</span><span class="p">)</span><span class="w"> </span><span class="nx">first</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span><span class="w"> </span><span class="c1">// Safe</span> <span class="c1">// 4. Incremental migration with @ts-ignore:</span> <span class="c1">// @ts-ignore -- TODO: fix in next sprint</span> <span class="nx">legacyFunction</span><span class="p">(</span><span class="nx">untypedArg</span><span class="p">);</span> <span class="c1">// 5. Type assertions for known types:</span> <span class="kd">const</span><span class="w"> </span><span class="nx">el</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">)</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="nx">HTMLDivElement</span><span class="p">;</span> </code></pre></div> <p>Key points: - strictNullChecks is most impactful -- enables optional chaining patterns - Optional chaining (?.) and nullish coalescing (??) are the primary tools - Non-null assertion (!) is an escape hatch -- document why it's safe - Migrate file by file using @ts-ignore for unresolved issues - unknown is safer than any -- forces explicit type narrowing</p>