實作 TypeScript 在 Class, Interface 的應用。

TypeScript-Demo.ts

interface IWellcome {
	greet(): any;
}

class User {
	firstName: string;
	lastName: string;
	
	constructor(firstName: string, lastName: string) {
		this.firstName = firstName;
		this.lastName = lastName;
		this.logUser();
	}
	
	private fullName(): string {
		return `${this.firstName} ${this.lastName}`;
	}
	
	getFullName(): string {
		return this.fullName();
	}
	
	logUser(): any {
		let time = new Date();
		console.log(`Time: ${time.toLocaleDateString()} ${time.toTimeString()} ==> User ${this.getFullName()} added`);	
	}
}

class Member extends User implements IWellcome {
	constructor(firstName: string, lastName: string) {
		super(firstName, lastName);
	}
	
	greet(): void {
		alert(`Hello ${this.getFullName()}`);
	}
}

let member = new Member('Alan', 'Jui');

var button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function () {
    alert(member.greet());
};
document.body.appendChild(button);

以上之 TypeScript 原始程式程式碼，可在 TypeScript 官網（URL： http://www.typescriptlang.org/ ）「試玩」。

操作方法：

1. 點擊連結進入官網的 Playground
   http://goo.gl/NvakSp
2. 點擊右上角的「Run」按鈕，觀察執行結果，並驗證自 TypeScript 編譯的 JavaScript 程式碼，確實能正確無誤於 Web 瀏覽器執行。