NestJS 12 @Optional() inheritance — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 NestJS 12.1+: does @Optional() survive the subclass?</h1>
    <p class="pg-sub">
      A <b>model</b> of NestJS's DI metadata lookup — not a real Nest bootstrap.
      <code>BaseApiKeyGuard</code> declares one optional constructor parameter.
      <code>TenantApiKeyGuard</code> extends it. Pick whether the subclass has its
      own constructor, pick the Nest version, then try to boot and watch which
      class the optional marker is actually read from.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Configure the subclass and the Nest version</div>
      <div class="field">
        <span class="ctl-label">TenantApiKeyGuard's constructor</span>
        <div class="seg" id="ctorSeg">
          <button type="button" aria-pressed="true" data-val="inherited">No constructor of its own</button>
          <button type="button" aria-pressed="false" data-val="own-nooptional">Own constructor, forgets @Optional()</button>
          <button type="button" aria-pressed="false" data-val="own-optional">Own constructor, redeclares @Optional()</button>
        </div>
      </div>
      <div class="field" style="margin-top:12px">
        <span class="ctl-label">NestJS version reading the metadata</span>
        <div class="seg" id="versionSeg">
          <button type="button" aria-pressed="true" data-val="v11">v11 (always chain-walks for @Optional())</button>
          <button type="button" aria-pressed="false" data-val="v120">v12.0.0–12.0.4 (always getOwnMetadata on the literal subclass — a regression)</button>
          <button type="button" aria-pressed="false" data-val="v121">v12.1+ (getOwnMetadata on whichever class owns the constructor)</button>
        </div>
      </div>
      <p class="hint">
        <code>ApiKeyModuleOptions</code> has no provider registered in <code>AuthModule</code> —
        that's fixed for this whole demo. The only question is whether Nest treats the
        missing dependency as optional or required.
      </p>
      <div class="btn-row" style="margin-top:10px">
        <button class="btn primary sm" id="bootBtn">▶ Try to boot AuthModule</button>
        <button class="btn ghost sm" id="resetBtn">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Metadata actually present, own vs. inherited</div>
      <div class="classgrid">
        <div class="classbox">
          <h3>BaseApiKeyGuard</h3>
          <div class="meta-row"><span class="k">own paramtypes</span><span class="v meta-v-yes">[ApiKeyModuleOptions]</span></div>
          <div class="meta-row"><span class="k">own @Optional() markers</span><span class="v meta-v-yes">{ 0: true }</span></div>
        </div>
        <div class="classbox">
          <h3>TenantApiKeyGuard</h3>
          <div class="meta-row"><span class="k">own paramtypes</span><span class="v" id="childParamTypes">—</span></div>
          <div class="meta-row"><span class="k">own @Optional() markers</span><span class="v" id="childOptional">—</span></div>
        </div>
      </div>
      <div class="arrowdown">↓ what Nest resolves for <code>TenantApiKeyGuard</code>, given the version's lookup rule ↓</div>
      <div class="classbox" style="margin-bottom:10px">
        <div class="meta-row"><span class="k">resolved paramtypes (always chain-walked)</span><span class="v meta-v-yes" id="resolvedTypes">[ApiKeyModuleOptions]</span></div>
        <div class="meta-row"><span class="k">optional marker read from</span><span class="v" id="resolvedOwner">—</span></div>
        <div class="meta-row"><span class="k">resolved @Optional() for param 0</span><span class="v" id="resolvedOptional">—</span></div>
      </div>
      <div class="status" id="bootStatus">
        <span class="dot info" id="bootDot"></span>
        <span id="bootText">Pick a configuration, then click "Try to boot AuthModule".</span>
      </div>
      <div class="log" id="bootLog" style="margin-top:10px">(simulated DI trace — not real NestJS output)</div>
    </div>
  </div>

preview

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