0

所以我对 typescript、javascript 和 web-shizzles 很陌生（我通常构建原生应用程序）。但我正在尝试使用 Phaser3 并使用带有 typescript 的 VSCode 来转换 javascript 文件。首先，我使用了命名空间（C# 背景），但显然这不是打字稿的方式，所以我删除了命名空间并使用 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();
}

引导程序

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()”功能？

4

1 回答 1

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直接放入编译输出中，而不是包装在 aSystem.register中，这意味着它会在您加载文件时立即执行。

于 2019-07-10T08:27:57.797 回答