打字稿，添加導入語句時無“窗口”事件

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 ，這意味着在加載文件時將立即執行該文件。