Question

我目前正在尝试进入即将到来的学校项目的Typescript，但我在测试我的小程序时遇到了问题。我想要实现的是当我点击一个按钮时，我的程序开始运行。问题是当我点击按钮时，我无法设法在我的GameManager类中执行该功能。我使用的3个相关文件是：

index.html，我在其中设置了按钮

GameManager.ts，其中包含我想要调用的函数

Test.ts，这是我想测试程序的文件

GameManager.ts

此文件包含我要调用的函数updateCycle（）

import { Inventory } from "./Inventory"
import { ForeignTrader } from "./ForeignTrader";

export class GameManager {

    private timer;
    inventory: Inventory;
    foreignTrader: ForeignTrader;

    constructor() {

    }

    public gameLoop() {
        this.inventory.update(this.foreignTrader.getResourceDelivery());
    }    
    public updateCycle() {
        setInterval(() => this.gameLoop(), 5000);
    }
}

的index.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="interface.css" />
</head>
<body>
    <button id="button1" onclick="updateCycle()">Click Me!</button>
    <br />
    Gold: <span id="gold">0</span>
    <br />
    Wood: <span id="wood">0</span>
    <br />
    <script type="text/javascript" src="Library.js"></script>
    <script type="text/javascript" src="Resources.js"></script>
    <script type="text/javascript" src="Inventory.js"></script>
    <script type="text/javascript" src="ForeignTrader.js"></script>
    <script type="text/javascript" src="GameManager.js"></script>
    <script type="text/javascript" src="Test.js"></script>

</body>
</html>

我已经尝试了谷歌搜索，似乎问题是我的函数在本地范围内，因为我总是得到错误：

(index):6 Uncaught ReferenceError: updateCycle is not defined
at HTMLButtonElement.onclick (http://localhost/TradeGame/Trade%20Game/:6:48)
onclick @ (index):6

但无论我尝试什么，我都不知道如何将我所需要的功能带入全球范围。这里的主要问题是，我也无法将GameManager导入我的Test.ts文件中，因为这会自动为其提供自己的范围。当我点击按钮时，有什么方法可以让我使用这个功能吗？

tsconfig.json看起来像这样：

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "sourceMap": false
    },
    "exclude": [
        "node_modules"
    ]
}

Answer 1

不幸的是，由于浏览器本身不支持commonjs模块，因此如果没有捆绑包，这将是很难的但并非不可能。

在您进一步阅读之前，请先查看Webpack，Browserify或SystemJS。 Typescript还有一个webpack教程on their website（它正在使用反应，但我认为你仍然可以得到这个想法）。

如果捆绑包超出了您的项目范围，或者您只是想按正常方式继续，则无法从单独的文件导入/导出内容。

如果你尝试在脚本中加载，你可能也会在控制台中看到这样的错误，对吧？：

Uncaught ReferenceError: require is not defined

这是捆绑器修复的内容。它会导入您导入/导出的脚本，而不是所有require s。

要在不使用捆绑器的情况下修复此问题，所有内容都必须存在于同一个文件中（yuck）。但是 - 只是为了彻底 - 我在下面按{@ 1}}按钮点击调用了一个例子。

<强>的index.html

GameManager

<强> test.ts

tml>
<head>
</head>
<body>
    <button id="button1" onclick="manager.updateCycle()">Click Me!</button>
    <br />
    Gold: <span id="gold">0</span>
    <br />
    Wood: <span id="wood">0</span>
    <br />
    <script type="text/javascript" src="test.js"></script>
    <script>
        var manager = new GameManager();
    </script>
</body>
</html>

最后一些注意事项：

请注意，我从原始示例中删除了class GameManager { updateCycle(): void { console.log('Update') } }。这将在浏览器中创建另一个语法错误。
我还export - 在导入后编辑了new的实例，因为GameManager是updateCycle函数（而不是public函数）。我还更新了按钮中的static以反映这一点。

打字稿：在全局范围内使用类函数

1 个答案: