TypeScriptでまるばつゲームを実装したがわからない箇所がある。

#わからないこと
TypeScriptで資料を写経してまるばつゲームを実装したのですが、分からない箇所があります。(ページ下)
参考資料：TypeScript リファレンス著：わかめまさひろ

#まるばつゲームの仕様
2人が対戦するゲームで３×３のマス目に○(先手)と×(後手)を交互においていき、縦・横・斜めのどれか一列に同じマークを先揃えた方が勝ち

#ソース

typescript
1module MaruBatsu {
2    // 先手・後手を表す
3    export enum Piece {
4        Maru,
5        Batsu
6    }
7
8    // ゲーム盤の管理・進行を行うクラス
9    export class GameLogic {
10        SIDE = 3;
11        board: Piece[][];
12        turn: Piece;
13
14        constructor(public el: HTMLElement) {   
15        }
16
17        // ゲームの初期設定を行いゲームを開始する
18        start(): void {
19            // ゲーム画面用のHTMLElementの中身を消している。
20            this.el.innerHTML = '';
21            // 最初の手番を○に設定する
22            this.turn = Piece.Maru;
23            // 盤面の状態を初期化する (3×3)
24            // 各マスはnullで初期化する
25            // 画面の状態を盤面の状態に合わせる
26            // この後に追加してある addPiece メソッドで1マスごとに作成する。
27            this.board = [];
28            for (var i = 0; i < this.SIDE; i++) {
29                this.board.push([]);
30            }
31            for (var y = 0; y < this.SIDE; y++) {
32                for (var x = 0; x < this.SIDE; x++) {
33                    this.board[x][y] = null;
34                    this.addPiece(x, y);
35                }
36            }
37        }
38
39        // 勝敗をチェックする
40        isWinner(turn: Piece): boolean {
41            // 縦横の判定
42            for (var i = 0; i < this.SIDE; i++) {
43                var v = true;
44                var h = true;
45                for (var j = 0; j < this.SIDE; j++) {
46                    if (this.board[i][j] !== turn) {
47                        v = false
48                    }
49                    if (this.board[j][i] !== turn) {
50                        h = false
51                    }
52                }
53                if (v || h) {
54                    return true;
55                }
56            }
57            
58            // 斜めの判定
59            var c = true;
60            var r = true;
61            for (var i = 0; i < this.SIDE; i++) {
62                if (this.board[i][i] !== turn) {
63                    c = false;
64                }
65                if (this.board[i][this.SIDE - i - 1] !== turn) {
66                    r = false;
67                }
68            }
69            if (c || r) {
70                return true;
71            }
72
73            return false;
74        }
75
76        // １手指す
77        put(x: number, y: number, el: HTMLElement): void {
78            if (this.board[x][y] !== null) {
79                // 既に何か置かれていたら無視する
80                return;
81            }
82            var current = this.turn;
83            this.board[x][y] = this.turn;
84            // 表示の変更と指し手の交代
85            if (this.turn === Piece.Maru) {
86                el.innerText = '○';
87                this.turn = Piece.Batsu
88            } else {
89                el.innerText = '×';
90                this.turn = Piece.Maru;
91            }
92            // 勝者になったのかチェックと結果表示
93            if (this.isWinner(current)) {
94                alert('○の勝ち！');
95            } else {
96                alert('×の勝ち！');
97            }
98        }
99
100        // 1マスに相当するHTML要素を作成し追加する。
101        addPiece(x: number, y: number): void {
102            var div = document.createElement('div');
103            div.addEventListener('click', () => {
104                this.put(x, y, div);
105            });
106            div.className = 'piece';
107            if (x === 0) {
108                div.className += ' head';
109            }
110            this.el.appendChild(div);
111        }
112    }    
113}
114
115window.onload = () => {
116    var el = document.getElementById('game');
117    var logic = new MaruBatsu.GameLogic(el);
118    logic.start();
119};
120
121console.log(this);

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <title>まるばつゲーム</title>
5    <link rel="stylesheet" type="text/css" href="main.css" charset="utf-8">
6</head>
7<body>
8    <h1>まるばつゲーム</h1>
9
10    <div id="game">Javacript is not running?</div>
11
12    <script type"text/javascript" src="main.js" charset="utf-8"></script>
13</body>
14</html>
15

CSS
1@charset "utf-8";
2
3.head {
4    clear: both;
5}
6
7.piece {
8    display: block;
9    float: left;
10    width: 30px;
11    height: 30px;
12    border-width: 1px;
13    border-style: solid
14}
15
16

#分からない箇所

typescript
1/** GameLogic クラスのメンバ変数です。 */
2board: Piece[][];
3
4/** 省略 */
5
6/** startメソッドのスコープ内です。 */
7this.board = [];            
8for (var i = 0; i < this.SIDE; i++) {
9this.board.push([]);
10}

######Q1.メンバ変数 boad になぜ enum を型定義しているのか？
enum は別の関数に number を渡すメソッドだと理解しています。
2つの要素しかない enum がどうして盤面(3×3)のプロパティの型となるのか理解できませんでした。
######Q2.start内ので行われている処理は筆者の解釈は合っていますか？
まず、board に大枠の配列を一つ代入し、その後、その配列の中に更に3つの配列を代入し二次元配列を完成させている。つまり、boardの中身はこうなっている。