TypeScript Generics: any vs <T>

<div class="wrap">
    <h1>🎮 TypeScript generics — <code>any</code> vs <code>&lt;T&gt;</code></h1>
    <p class="sub">
      Pick a dataset, then click "Call <code>.toUpperCase()</code> on the first item."
      Both cards run the <em>same</em> operation on the <em>same</em> data — one typed
      <code>any</code>, one typed generically. Watch what each one catches, and when.
    </p>

<div class="presets">
      <button data-set="numbers" class="active">Numbers: [1, 2, 3]</button>
      <button data-set="strings">Strings: ["ada", "grace"]</button>
      <button data-set="objects">Objects: [{ id: 1 }]</button>
    </div>

<div class="cards">
      <div class="card">
        <h2>any version</h2>
        <pre><code>function firstElement(arr: any): any {
  return arr[0];
}</code></pre>
        <div class="result idle" id="anyResult">Pick a preset, then hit run.</div>
      </div>
      <div class="card">
        <h2>&lt;T&gt; version</h2>
        <pre><code>function firstElement&lt;T&gt;(arr: T[]): T | undefined {
  return arr[0];
}</code></pre>
        <div class="result idle" id="genResult">Pick a preset, then hit run.</div>
      </div>
    </div>

<div class="actions">
      <button class="primary" id="run">Call .toUpperCase() on the first item</button>
      <button class="ghost" id="reset">Reset</button>
    </div>

<p class="note" id="explainer">
      <strong>What just happened:</strong> pick a preset and press run to find out.
    </p>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.

TypeScript Generics: any vs &lt;T&gt;

TypeScript Generics: any vs <T>