打字稿，添加导入语句时没有“窗口”事件答案

【问题标题】：Typescript, no 'window' events when adding an import statement打字稿，添加导入语句时没有“窗口”事件
【发布时间】：2019-07-10 07:58:50
【问题描述】：

所以我对 typescript、javascript 和 web-shizzles 很陌生（我通常构建原生应用程序）。但是我正在尝试使用 Phaser3 并使用带有 typescript 的 VSCode 来转换 javascript 文件。首先我使用了命名空间（C# 背景），但显然这不是 typescript 的方式，所以我删除了命名空间并使用 export 和相应的 import 语句。

问题：我花了一段时间才发现我的窗口事件 (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()”功能？

【问题讨论】：

什么是Boot，它有什么作用？您实际上是如何运行此代码的？基本上我们需要一个Minimal, Reproducible Example

标签： javascript typescript visual-studio-code window-load

【解决方案1】：

当您import/export 时，您创建了一个模块。您正在使用 SystemJS (module: system 在您的 tsconfig 中)。模块封装在系统寄存器块中：

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'); 之类的东西来运行该代码。当您的 typescript 文件不是模块时，window.onload 直接放入编译输出中，而不是包裹在 System.register 中，这意味着它会在您加载文件时立即执行。

【讨论】：