TypeScript Demo (for testing import)

index.html

<div class="container">
  <h1>Hello, <span id="title">World</span>!</h1>
  <img class="logo" src="http://127.0.0.1:8080/livecodes/assets/templates/typescript.svg" />
  <p>You clicked <span id="counter">0</span> times.</p>
  <button id="counter-button">Click me</button>
</div>

script.ts

class Counter {
  private count: number;
  constructor() {
    this.count = 0;
  }
  increment() {
    this.count += 1;
  }
  getValue() {
    return this.count;
  }
}

const title = document.querySelector("#title");
const count = document.querySelector("#counter");
const button = document.querySelector("#counter-button");

title.textContent = "TypeScript";
const counter = new Counter();
button.addEventListener(
  "click",
  () => {
    counter.increment();
    count.textContent = String(counter.getValue());
  },
  false
);

style.css

.container,
.container button {
  text-align: center;
  font: 1em sans-serif;
}
.logo {
  width: 150px;
}

TypeScript_Demo_for_testing_import_.md

TypeScript Demo (for testing import)

A project created by Hatem Hosny on LiveCodes.