Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>TypeScript test</title>
<div class="container">
<ul class="piyo-list">
<li><a href="" class="piyo-button">Add piyo</a></li>
<script src="../js/app.js"></script>
// src/ts/index.ts
import { Piyo } from "./piyo";
function init() {
const container = <HTMLElement>document.querySelector('.container');
new Piyo(container);
export function getPiyo(): string {
return 'piyo';
document.addEventListener('DOMContentLoaded', init);
// src/ts/piyo.ts
export class Piyo {
private list: HTMLElement;
private button: HTMLElement;
constructor(container: HTMLElement) {
this.list = <HTMLElement>container.querySelector('.piyo-list')
this.button = <HTMLElement>container.querySelector('.piyo-button');
this.button.addEventListener('click', this.onButtonClicked.bind(this));
private onButtonClicked(event: Event): void {
this.appendList(this.list, 'piyo');
private appendList(list: HTMLElement, text: string) {
const item = document.createElement('li');
item.innerHTML = text;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment