个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
我目前正在为即将到来的学校项目尝试使用 Typescript，但我在测试我的小程序时遇到了问题。我想要实现的是，当我单击一个按钮时，我的程序开始运行。问题是当我单击按钮时，我无法设法让我的 GameManager 类中的函数执行。我使用的 3 个相关文件是:
index.html，我在其中设置了按钮
GameManager.ts，其中包含我要调用的函数
Test.ts，这是我要测试程序的文件
游戏管理器.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"
]
}
最佳答案
不幸的是，由于浏览器本身不支持 commonjs 模块，如果没有 bundler ，这将是困难的但并非不可能。
在您进一步阅读之前，请先查看 Webpack , Browserify , 或 SystemJS . Typescript也有webpack教程on their website (它使用的是 React，但我认为您仍然可以理解)。
如果 bundler 超出了您的项目范围，或者您只是真的想照常进行您不能从单独的文件导入/导出内容。
如果您尝试按原样加载脚本，您可能还会在控制台中看到类似这样的错误，对吧？:
Uncaught ReferenceError: require is not defined
这就是 bundler 修复的问题。它注入(inject)您正在导入/导出的脚本来代替所有这些require。
要在不使用 bundler 的情况下解决此问题，所有内容都必须存在于同一个文件中(糟糕)。但是 - 只是为了彻底 - 我在下面有一个 GameManager 在按钮点击时被调用的例子。
index.html
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>
test.ts
class GameManager {
updateCycle(): void {
console.log('Update')
}
}
一些最后的说明:
export。这会在浏览器中产生另一个语法错误。新建创建了一个GameManager实例，因为updateCycle是一个public函数(而不是 static 一个)。我还更新了按钮中的 onClick 以反射(reflect)这一点。关于 typescript :在全局范围内使用类函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41081059/
24
4
0
我的应用程序中有一个 settings.php 页面，它使用 $GLOBALS 来存储网络应用程序中使用的配置。 例如，他是我使用的一个示例设置变量: $GLOBALS["new_login_page
我正在尝试编译我们在 OS 类上获得的简单操作系统代码。它在 Ubuntu 下运行良好，但我想在 OS X 上编译它。我得到的错误是: [compiling] arch/i386/arch/start
我知道distcp无法使用通配符。 但是，我将需要在更改的目录上安排distcp。 (即，仅在星期一等“星期五”目录中复制数据)，还从指定目录下的所有项目中复制数据。 是否有某种设计模式可用于编写此类
是否可以在config.groovy中全局定义资源格式(json，xml)的优先级，而不是在每个Resource上指定？例如，不要在@Resource Annotation的参数中指定它，例如: @R
是否有一些简单的方法来获取大对象图的所有关联，而不必“左连接获取”所有关联？我不能只告诉 Hibernate 默认获取 eager 关联吗？ 最佳答案 即使有可能有一个全局 lazy=false(谷歌
我正在尝试实现一个全局加载对话框...我想调用一些静态函数来显示对话框和一些静态函数来关闭它。与此同时，我正在主线程或子线程中做一些工作...... 我尝试了以下操作，但对话框没有更新...最后一次，
当我偶然发现 this question 时，我正在阅读更改占位符文本。 无论如何，我回去学习了占位符。一个 SO 的回答大致如下: Be careful when designing your pl
例如，如果我有这样的文字: "hello800 more text 1234 and 567" 它应该匹配 1234 和 567，而不是 800(因为它遵循 hello 的 o，这不是一个数字)。 这
我一直在尝试寻找一种无需使用 SMS 验证系统即可验证电话号码(Android 和 iPhone)的方法。原因纯粹是围绕成本。我想要一个免费的解决方案。 我可以安全地假设 Android 操作系统会向
解决此类问题的规范 C++ 设计模式是什么？ 我有一些共享多个类的多线程服务器。我需要为大多数类提供各种运行时参数(例如服务器名称、日志记录级别)。 在下面的伪 C++ 代码中，我使用了一个日志记录类
这个问题在这里已经有了答案: Using global variables in a function (25 个答案) 关闭 9 年前。 我是 python 的新手，所以可能有一个简单的答案，但我
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Does C++ call destructors for global and class static
我正在尝试使用 Objective-C 中的 ArrayList 的等价物。我知道我必须使用 NSMutableArray。我想要一个字符串列表 (NSString)。关键是我的列表应该可以从我类(c
今天刚开始学习 Android 开发，我找不到任何关于如何定义 Helper 类或将全局加载的函数集合的信息，我会能够在我创建的任何 Activity 中使用它们。 我的计划是创建(至少目前)2 个几
为什么这段代码有效: var = 0 def func(num): print num var = 1 if num != 0: func(num-1) fun
$GLOBALS["items"] = array('one', 'two', 'three', 'four', 'five' ,'six', 'seven'); $alter = &$GLOBALS
我想知道如何实现一个可以在任何地方使用您自己的设置的全局记录器: 我目前有一个自定义记录器类: class customLogger(logging.Logger): ... 该类位于一个单独的
我需要使用 React 测试库和 Jest 在我的测试中模拟不同的窗口大小。 目前我必须在每个测试文件中包含这个beforeAll: import matchMediaPolyfill from 'm
每次我遇到单例模式或任何静态类(即(几乎)只有静态成员的类)的实现时，我想知道这是否实际上不是一种黑客行为，因此只是为了设计而严重滥用类和实例的原则单个对象，而不是设计类和创建单个实例。对我来说，看起
这个问题在这里已经有了答案: Help understanding global flag in perl (2 个回答) 7年前关闭。 my $test = "There was once an\n
我是一名优秀的程序员,十分优秀！