Typescript Vs Javascript

<div class="infographic-ts" id="infographic-ts">
<style>
.infographic-ts {
  --line: #ddd6c9;
  --body-font: system-ui, -apple-system, sans-serif;
  --mono-font: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
  --ed-bg:     #1e1e1e;
  --ed-bar:    #2a2a2a;
  --ed-text:   #d4d4d4;
  --ed-muted:  #8a8a8a;
  --ed-kw:     #c586c0;
  --ed-type:   #4ec9b0;
  --ed-str:    #ce9178;
  --ed-fn:     #dcdcaa;
  --ed-num:    #b5cea8;
  --ed-punc:   #d4d4d4;
  --ed-out:    #9cdcfe;
  --ed-err:    #f14c4c;
  --ed-ok:     #4ec9b0;
  --run-bg:    #2e7d46;
  --run-bg-hover: #35924f;
  max-width: 720px;
  margin: 0 auto;
  box-sizing: border-box;
  background: transparent;
  font-family: var(--body-font);
}
.infographic-ts * { box-sizing: border-box; }

.code-window { background: var(--ed-bg); border-radius: 8px; overflow: hidden; margin-bottom: 1.5rem; }
.code-window:last-child { margin-bottom: 0; }
.code-topbar { display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0.8rem; background: var(--ed-bar); }
.code-dots { display: flex; gap: 6px; }
.code-dot { width: 10px; height: 10px; border-radius: 50%; }
.code-dot.r { background: #ff5f57; }
.code-dot.y { background: #febc2e; }
.code-dot.g { background: #28c840; }
.code-filename { font-family: var(--mono-font); font-size: 0.76rem; color: var(--ed-muted); }
.run-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--run-bg);
  color: #fff; border: none; border-radius: 4px; padding: 0.35rem 0.75rem; font-size: 0.76rem;
  font-family: var(--body-font); font-weight: 500; cursor: pointer; }
.run-btn:hover { background: var(--run-bg-hover); }
.run-btn:disabled { opacity: 0.6; cursor: default; }
.run-btn svg { width: 11px; height: 11px; }

.code-body { padding: 1rem 1.25rem; font-family: var(--mono-font); font-size: 0.85rem;
  line-height: 1.65; color: var(--ed-text); white-space: pre; overflow-x: auto; }
.tok-kw { color: var(--ed-kw); }
.tok-type { color: var(--ed-type); }
.tok-str { color: var(--ed-str); }
.tok-fn { color: var(--ed-fn); }
.tok-num { color: var(--ed-num); }
.tok-punc { color: var(--ed-punc); }
.tok-muted { color: var(--ed-muted); }

.console { border-top: 1px solid #333; padding: 0 1.25rem; max-height: 0; overflow: hidden;
  font-family: var(--mono-font); font-size: 0.8rem; line-height: 1.7; transition: max-height 0.3s ease, padding 0.3s ease; }
.console.show { max-height: 120px; padding: 0.75rem 1.25rem; }
.console-line { color: var(--ed-out); }
.console-line.err { color: var(--ed-err); }
.console-line.ok { color: var(--ed-ok); }
.console-prompt { color: var(--ed-muted); margin-right: 0.4rem; }
</style>

<div class="code-window">
  <div class="code-topbar">
    <div class="code-dots"><span class="code-dot r"></span><span class="code-dot y"></span><span class="code-dot g"></span></div>
    <span class="code-filename">greet.js</span>
    <button class="run-btn" id="jsRunBtn" type="button">
      <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"/></svg>
      run
    </button>
  </div>
  <div class="code-body"><span class="tok-kw">function</span> <span class="tok-fn">greet</span><span class="tok-punc">(name) {</span>
  <span class="tok-kw">return</span> <span class="tok-str">"Hello, "</span> + name<span class="tok-punc">;</span>
<span class="tok-punc">}</span>

<span class="tok-fn">greet</span><span class="tok-punc">(</span><span class="tok-num">42</span><span class="tok-punc">);</span></div>
  <div class="console" id="jsConsole"></div>
</div>

<div class="code-window">
  <div class="code-topbar">
    <div class="code-dots"><span class="code-dot r"></span><span class="code-dot y"></span><span class="code-dot g"></span></div>
    <span class="code-filename">greet.ts</span>
    <button class="run-btn" id="tsRunBtn" type="button">
      <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"/></svg>
      run
    </button>
  </div>
  <div class="code-body"><span class="tok-kw">function</span> <span class="tok-fn">greet</span><span class="tok-punc">(name: </span><span class="tok-type">string</span><span class="tok-punc">): </span><span class="tok-type">string</span> <span class="tok-punc">{</span>
  <span class="tok-kw">return</span> <span class="tok-str">"Hello, "</span> + name<span class="tok-punc">;</span>
<span class="tok-punc">}</span>

<span class="tok-fn">greet</span><span class="tok-punc">(</span><span class="tok-num">42</span><span class="tok-punc">);</span></div>
  <div class="console" id="tsConsole"></div>
</div>

<script>
(function () {
  var wrapper = document.currentScript.closest('.infographic-ts')
    || document.querySelector('.infographic-ts');
  var root = wrapper;

  function typeLine(consoleEl, cls, text, cb) {
    var line = document.createElement('div');
    line.className = 'console-line ' + cls;
    consoleEl.appendChild(line);
    var i = 0;
    var t = setInterval(function () {
      line.textContent = text.slice(0, i + 1);
      i++;
      if (i >= text.length) {
        clearInterval(t);
        if (cb) cb();
      }
    }, 12);
  }

  var jsBtn = root.querySelector('#jsRunBtn');
  var jsConsole = root.querySelector('#jsConsole');
  jsBtn.addEventListener('click', function () {
    jsBtn.disabled = true;
    jsConsole.innerHTML = '';
    jsConsole.classList.add('show');
    setTimeout(function () {
      typeLine(jsConsole, 'ok', '"Hello, 42"', function () {
        jsBtn.disabled = false;
      });
    }, 150);
  });

  var tsBtn = root.querySelector('#tsRunBtn');
  var tsConsole = root.querySelector('#tsConsole');
  tsBtn.addEventListener('click', function () {
    tsBtn.disabled = true;
    tsConsole.innerHTML = '';
    tsConsole.classList.add('show');
    setTimeout(function () {
      typeLine(tsConsole, 'err', "Type error: Argument of type 'number' is not assignable to parameter of type 'string'.", function () {
        typeLine(tsConsole, 'err', 'Compilation failed \u2014 greet() was never called.', function () {
          tsBtn.disabled = false;
        });
      });
    }, 150);
  });
})();
</script>
</div>