title: How to change a value in CSS using TypeScript?
body: <p>I want to make an <code>&lt;input&gt;</code> text box where you write a certain color, say <code>'red'</code> and a certain text gets colored like that. I found some guidelines on how to do it, but the code is in JavaScript, instead of TypeScript. So far I got this:</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;input id=&quot;color&quot; /&gt;
  &lt;h1&gt;Change the color&lt;/h1&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>&lt;style&gt;
  h1 {
     color: var(--color, blue)
  }
  &lt;/style&gt;
  </code></pre>
  <p><strong>JavaScript</strong></p>
  <pre><code>const color = document.querySelector('#color');
  color.addEventListener('input', e =&gt; {
  document.documentElement.style.setProperty('--color', color.value)
  })
  </code></pre>
  <p>As I am using <strong>.ts</strong> classes, I am wondering how can the JavaScript above be written instead?</p>