0

我最近学习打字稿。我尝试使用 typescript 编写一个小而简单的井字游戏。但是，我遇到了一个问题。我的打字稿文件（file2.ts）可以编译为javascript，但它无法初始化（例如，我在window.onload（）{}块内的第一行放置了一个警报（“start”），当我运行程序，警报没有出现）。我已经在 html 文件中引用了我的打字稿文件，但它仍然不起作用。

下面是我的两个文件（file2.ts 和 UI.html）

文件2.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();


};

用户界面.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>
4

1 回答 1

2

问题是您export的课程前面的关键字。这告诉 TypeScript 整个文件是一个模块，并且这些导出指示该模块中公开可用的内容。您需要删除export关键字或将 window.onload() 移至单独的源文件并学习使用模块。

TypeScript Playground是快速测试将编译成什么源代码的好地方。在有和没有出口的情况下检查一下，看看有很大的不同。

于 2013-10-01T20:19:24.857 回答