6.5: Creating and consuming modules instead of using references.

app/app.ts

@@ -1,14 +1,15 @@
-/// <reference path="player.ts" />
-/// <reference path="game.ts" />
+import * as Helpers from './utility';
+import {Game} from './game';
+import {Player} from './player';
 
 let newGame: Game;
 
 document.getElementById('startGame')!.addEventListener('click', () => {
   let player: Player = new Player();
-  player.name = Utility.getInputValue('playername');
+  player.name = Helpers.getValue('playername');
 
-  let problemCount: number = Number(Utility.getInputValue('problemCount'));
-  let factor: number = Number(Utility.getInputValue('factor'));
+  let problemCount: number = Number(Helpers.getValue('problemCount'));
+  let factor: number = Number(Helpers.getValue('factor'));
 
   newGame = new Game(player, problemCount, factor);
   newGame.displayGame();

app/game.ts

@@ -1,10 +1,10 @@
-/// <reference path="utility.ts" />
-/// <reference path="result.ts" />
-/// <reference path="player.ts" />
-/// <reference path="scoreboard.ts" />
+import {getValue} from "./utility";
+import {Player} from "./player";
+import {Result} from "./result";
+import {Scoreboard as ResultPanel} from "./scoreboard";
 
-class Game {
-  private scoreboard: Scoreboard = new Scoreboard();
+export class Game {
+  private scoreboard: ResultPanel = new ResultPanel();
 
   /**
    * Passing "public" parameters to constructor() automatically creates
@@ -50,7 +50,7 @@ class Game {
 
     // Loop through the text boxes and calculate the number that are correct.
     for (let i = 1; i < this.problemCount; i++) {
-      let answer: number = Number(Utility.getInputValue('answer' + i));
+      let answer: number = Number(getValue('answer' + i));
       if (i * this.factor === answer) {
         score++;
       }

app/person.ts

@@ -1,4 +1,4 @@
-interface Person {
+export interface Person {
   // If age exists, then it must be a number; but it is not required to exist.
   age?: number;
   formatName: () => string;

app/player.ts

@@ -1,9 +1,11 @@
-/// <reference path="person.ts" />
+import {Person} from "./person";
 
-class Player implements Person {
+export class Player implements Person {
   age: number;
+
   formatName(): string {
     return this.name.toUpperCase();
   }
+
   name: string;
 }

app/result.ts

@@ -1,7 +1,7 @@
 // Could have been a class, but since there are no methods involved, an
 // interface is cheaper (translates to just nothing in compiled code, unlike a
 // class).
-interface Result {
+export interface Result {
   playerName: string;
   score: number;
   problemCount: number;

app/scoreboard.ts

@@ -1,6 +1,6 @@
-/// <reference path="result.ts" />
+import {Result} from "./result";
 
-class Scoreboard {
+export class Scoreboard {
   private results: Result[] = [];
 
   addResult(newResult: Result): void {

app/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "removeComments": true,
-    "outFile": "../js/app.js"
+    // outFile is not compatible with all module loaders, including CommonJS
+    "module": "commonjs"
   },
   "files": [
     "app.ts"

app/utility.ts

@@ -1,6 +1,13 @@
-class Utility {
-  static getInputValue(elementId: string): string {
-    const inputElement: HTMLInputElement = <HTMLInputElement>document.getElementById(elementId);
-    return inputElement.value;
-  }
+function getInputValue(elementId: string): string {
+  const inputElement: HTMLInputElement = <HTMLInputElement>document.getElementById(elementId);
+  return inputElement.value;
+}
+
+function logger(message: string): void {
+  console.log(message);
+}
+
+export {
+  getInputValue as getValue,
+  logger,
 }