打字稿，添加导入语句时无“窗口”事件

Question

因此，我对打字稿，JavaScript和Web-shizzles非常陌生（我通常会构建本机应用程序）。 但是我正在使用Phaser3进行实验，并使用带有Typescript的VSCode来转换javascript文件。 首先，我使用了命名空间（C＃背景），但显然这不是输入打字稿的方法，因此我删除了命名空间，并使用了带有相应导入语句的导出。

问题：我花了一段时间才弄清楚我的窗口事件（window.onload）由于导入了必需的类型而没有触发。 该事件是应用程序的入口点。 始终欢迎提出其他启动项目的建议。 这是代码：

window.onload不会触发：

import { Boot } from "./Boot";

window.onload = () => {
    console.log("Test");
    Boot.runApp();
}

删除“导入”后，window.onload火灾！

//import { Boot } from "./Boot";

window.onload = () => {
    console.log("Test");
    //Boot.runApp();
}

Boot.ts

imports...

export class Boot {
        static runApp() {
            console.log("RUN APP!!");
//Start the game... (code removed)

        }
}

这是我的tsconfig：

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "ES5",
        "module": "system",
        "sourceMap": false,
        "outDir": "bin/js/",
        "outFile": "bin/js/game.js"
    }, 

    "include": [
        "./src/**/*"
        ],

    "files":[
        "./tsDefinitions/nineslice.d.ts",
        "./tsDefinitions/phaser.d.ts"
    ]    
}

任何想法为什么它会这样？ 有点烦人，因为那个地方启动了我的游戏代码。 是否可以从index.html中的标签启动我的'Boot.runApp（）'函数？

Answer 1

import / export将创建一个模块。 您正在使用SystemJS（ module: system tsconfig中的system）。 模块包装在系统寄存器块中：

System.register("index", [], function (exports_2, context_2) {
    "use strict";
    var __moduleName = context_2 && context_2.id;
    return {
        setters: [],
        execute: function () {
            window.onload = function () {
                console.log("Test");
            };
        }
    };
});

您需要运行类似System.import('index.js'); 运行该代码。 如果您的打字稿文件不是模块，则将window.onload直接放入已编译的输出中，而不包装在System.register ，这意味着在加载文件时将立即执行该文件。