typescript and html in visual studio

I recently learn typescript. I tried to write a small and simple tic tac toe game using typescript. However, I encounter a problem. My typescript file(file2.ts) can be compiled to javascript, but it just cannot be initialized(for example, I put a alert("start") at the first line inside the window.onload(){} block, when I run the program, the alert didn't show up). I have already reference my typescript file in the html file, but it still doesn't work.

Below is my two files(file2.ts and UI.html)

file2.ts:

export class player {
    name: string;
    symb: string;
    constructor(n: string, s: string) {
        this.name = n;
        this.symb = s;
        document.getElementById("p").innerHTML = "Player's name:" + this.name + ", Symbol: " + this.symb;
    }
}

export class ttt {
     p1: player;
     p2: player;
     count: number;
     win: number;  //win: 0 means not known, 1 means tie, 2 means someone win
     constructor(py1: player, py2: player) {
        this.p1 = py1;
        this.p2 = py2;
        this.count = 0;
        this.win = 0;
    }

     WhoseTurn() {  
        //p1's turn
        if (this.count % 2 == 0) return this.p1;
            //p2's turn
        else return this.p2;
    }

     checkgrid(e) {
        var x = e.id;
        var b0 = document.getElementById("Button0").innerHTML;
        var b1 = document.getElementById("Button1").innerHTML;
        var b2 = document.getElementById("Button2").innerHTML;
        var b3 = document.getElementById("Button3").innerHTML;
        var b4 = document.getElementById("Button4").innerHTML;
        var b5 = document.getElementById("Button5").innerHTML;
        var b6 = document.getElementById("Button6").innerHTML;
        var b7 = document.getElementById("Button7").innerHTML;
        var b8 = document.getElementById("Button8").innerHTML;
        switch (x) {
            case 'Button0':
                if ((b0 == b1 && b1 == b2) || (b0 == b3 && b3 == b6) || (b0 == b4 && b4 == b8)) return true;
                else return false;
                break;
            case 'Button1':
                if ((b0 == b1 && b1 == b2) || (b1 == b4 && b4 == b7)) return true;
                else return false;
                break;
            case 'Button2':
                if ((b0 == b1 && b1 == b2) || (b2 == b5 && b5 == b8) || (b2 == b4 && b4 == b6)) return true;
                else return false;
                break;
            case 'Button3':
                if ((b1 == b3 && b3 == b6) || (b3 == b4 && b4 == b5)) return true;
                else return false;
                break;
            case 'Button4':
                if ((b4 == b3 && b4 == b5) || (b1 == b4 && b4 == b7) || (b2 == b4 && b4 == b6) || (b1 == b4 && b8 == b4)) return true;
                else return false;
                break;
            case 'Button5':
                if ((b2 == b5 && b5 == b8) || (b3 == b4 && b4 == b5)) return true;
                else return false;
                break;
            case 'Button6':
                if ((b0 == b3 && b3 == b6) || (b6 == b7 && b7 == b8) || (b2 == b4 && b4 == b6)) return true;
                else return false;
                break;
            case 'Button7':
                if ((b6 == b7 && b7 == b8) || (b1 == b4 && b4 == b7)) return true;
                else return false;
                break;
            case 'Button8':
                if ((b2 == b5 && b5 == b8) || (b6 == b7 && b7 == b8) || (b0 == b4 && b4 == b8)) return true;
                else return false;
                break;
        }
    }

     check(e) {
        if (e.disabled != true) {
            e.disabled = true;
            e.innerHTML = this.WhoseTurn().symb;
            /*
            check whether some win here
            if someone win then return
            else this.count++; start();
            */
            if (this.checkgrid(e) == true) {
                this.win = 2;
                alert("You Win!");
                //exit
            }
            else {
                this.count++;
                this.start();
            }
        }
        else alert("Please choose other button!");
    }

     start() {
        if (this.win == 0) {
            var p = this.WhoseTurn();
            alert(p.name + "'s turn now, please choose a grid to go");
        }
        else if (this.win == 1) {
            alert("Tie");
            //exit
        }
        else { }//exit
    }
}



window.onload = () => {
    alert("start");
    var p1 = new player((<HTMLInputElement>document.getElementById("name1")).value, 'O');
    var p2 = new player((<HTMLInputElement>document.getElementById("name2")).value, 'X');
    var t = new ttt(p1, p2);
    t.start();


};

UI.html:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Game</title>
<link rel="stylesheet" href="app.css" type="text/css" />   
<script src="file2.js"></script>
</head>


<body>
    <p id="p"></p>
    <form>
        Player1's name: <input id="name1" type="text">
        Player2's name: <input id="name2" type="text">
    </form>

     <table id="board">
         <tr>
             <td><button id="Button0" onclick="t.check(this)">Empty</button></td>             
             <td><button id="Button1" onclick="t.check(this)">Empty</button></td>
             <td><button id="Button2" onclick="t.check(this)">Empty</button></td>
         </tr>
         <tr>
             <td><button id="Button3" onclick="t.check(this)">Empty</button></td>             
             <td><button id="Button4" onclick="t.check(this)">Empty</button></td>
             <td><button id="Button5" onclick="t.check(this)">Empty</button></td>
         </tr>
         <tr>
             <td><button id="Button6" onclick="t.check(this)">Empty</button></td>             
             <td><button id="Button7" onclick="t.check(this)">Empty</button></td>
             <td><button id="Button8" onclick="t.check(this)">Empty</button></td>
         </tr>
     </table>



</body>
</html>