为移相器游戏添加requirejs后未调用Typescript window.onload答案

【问题标题】：Typescript window.onload not being called after adding requirejs for phaser game为移相器游戏添加requirejs后未调用Typescript window.onload
【发布时间】：2015-11-01 16:32:40
【问题描述】：

我正在尝试使用移相器和 Typescript 制作游戏。我按照here 的说明进行操作，它最初是有效的。当我尝试使用 AMD 和 requirejs 模块化我的代码时，问题就出现了

index.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Resonate</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="phaser.js"></script>
    <script src="http://requirejs.org/docs/release/2.1.20/minified/require.js" data-main="app"></script>
</head>
<body>
    <h1>RESONATE</h1>

    <div id="content"></div>
</body>
</html>

播放器.ts

export class Player {

    color: string;

    constructor() {
        this.color = "#0000ff";
    }
}

app.ts

import player = require("Player");

class PhaserDemo {

    game: Phaser.Game;

    constructor() {
        this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content', { preload: this.preload, create: this.create });
    }

    preload() {
        this.game.load.image('phaser_run', 'run.png');
    }

    create() {
        console.log("Before");
        var p = new player.Player();
        this.game.stage.backgroundColor = p.color;
    }
}

window.onload = () => {
    console.log("ONLOAD");
    var game = new PhaserDemo();
};

现在，当我加载它时，window.onload 从未被调用，我尝试了以下操作 window.onload not calling function 对于 Javascript 解决方案，但我无法让它在 typescript 中工作。

如果你想看看https://gist.github.com/koreus7/06bee4a30d22bdc76d62

，这里还有生成的 Javascript

【问题讨论】：

链接问题中有关 RequireJS 和 window.onload 之间的竞争条件的部分仍然正确 - 您不能指望在该事件触发之前运行脚本。你应该解决这个问题。
问题是 the other question 中的 Javascript 不会转换为 typescript。我尝试过使用该解决方案，但我不知道如何从 javascript 调用 typescript。
基本上我的问题是如何在打字稿中实现this 解决方案？

标签： javascript requirejs typescript phaser-framework js-amd

【解决方案1】：

我相信它是由 require.js 加载器引起的，我没有明确知道它有点类似于 jspm system.js ，所以我们不需要确保加载窗口，因为加载器已经有确保这一点。

我刚刚删除了 window.onload，它运行良好 :)

【讨论】：

【解决方案2】：

对于 Javascript 解决方案，但我无法让它在 typescript 中工作。

基本上如果窗口已经加载附加到window.onload 将不会调用附加函数。

检查document.readyState === "complete"。或者使用 jquery ready 之类的东西：https://api.jquery.com/ready/

【讨论】：