我正在使用 typescript 制作一个骰子显示应用程序，我对它的学习还很陌生，但我认为我学得很好，但是我一直在用我正在工作的这个骰子应用程序来解决这个问题在。该应用程序的目的是掷骰子，最小数为 1，最大数在窗口负载上设置，当前为 99，然后在索引上生成并显示随机数以及最小和最大值。但是，当我编译并测试它时，我在控制台中收到此错误:
main.ts:66 Uncaught TypeError: Cannot set property 'max' of undefined at window.onload (main.ts:66)
window.onload @ main.ts:66 加载(异步)
(匿名)@ main.ts:63
在 vsCode 的控制台中，我在 main.ts 文件中得到了这个 errors in console
"use strict";
class Dice {
constructor(max) {
this.max = max;
this.min = 1;
}
get _max() {
return this.max;
}
get _min() {
return this.min;
}
set _max(max) {
this.max = max;
}
set _min(min) {
this.min = min;
}
roll() {
return Math.floor(Math.random() * this.max) + this.min;
}
}
class Display {
constructor(vm) {
this.max = vm.max.toString();
this.min = vm.min.toString();
this.rand = vm.rand.toString();
}
update() {
document.getElementById("random").innerText = this.rand;
if (this.min !== undefined) {
document.getElementById("min").innerText = this.min;
}
if (this.max !== undefined) {
document.getElementById("max").innerText = this.max;
}
}
}
window.onload = () => {
let ukDice = new Dice(99);
let viewModel;
viewModel.max = ukDice._max;
viewModel.min = ukDice._min;
viewModel.rand = ukDice.roll();
let output = new Display(viewModel);
output.update();
};
//# sourceMappingURL=main.js.map<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="random"></div>
<div id="min"></div>
<div id="max"></div>
</body>
</html>Main.ts:
interface viewModel {
max: number;
min: number;
rand: number;
}
class Dice {
private max: number;
private min: number;
constructor(max: number) {
this.max = max;
this.min = 1;
}
get _max(): number {
return this.max;
}
get _min(): number {
return this.min;
}
set _max(max: number) {
this.max = max;
}
set _min(min: number) {
this.min = min;
}
roll() {
return Math.floor(Math.random() * this.max) + this.min;
}
}
class Display {
private max: string;
private min: string;
private rand: string;
constructor(vm: viewModel) {
this.max = vm.max.toString();
this.min = vm.min.toString();
this.rand = vm.rand.toString();
}
update() {
document.getElementById("random").innerText = this.rand;
if (this.min !== undefined) {
document.getElementById("min").innerText = this.min;
}
if (this.max !== undefined) {
document.getElementById("max").innerText = this.max;
}
}
}
window.onload = () => {
let ukDice = new Dice(99);
let viewModel: viewModel;
viewModel.max = ukDice._max;
viewModel.min = ukDice._min;
viewModel.rand = ukDice.roll();
let output = new Display(viewModel);
output.update();
}
最佳答案
您需要声明为 let viewModel = new Display(ukDice); 并在 Dice 中添加 this.rand = 1;构造函数
"use strict";
class Dice {
constructor(max) {
this.max = max;
this.min = 1;
this.rand = 1;
}
get _max() {
return this.max;
}
get _min() {
return this.min;
}
set _max(max) {
this.max = max;
}
set _min(min) {
this.min = min;
}
roll() {
return Math.floor(Math.random() * this.max) + this.min;
}
}
class Display {
constructor(vm) {
this.max = vm.max.toString();
this.min = vm.min.toString();
this.rand = vm.rand.toString();
}
update() {
document.getElementById("random").innerText = this.rand;
if (this.min !== undefined) {
document.getElementById("min").innerText = this.min;
}
if (this.max !== undefined) {
document.getElementById("max").innerText = this.max;
}
}
}
window.onload = () => {
let ukDice = new Dice(99);
let viewModel = new Display(ukDice);
viewModel.max = ukDice._max;
viewModel.min = ukDice._min;
viewModel.rand = ukDice.roll();
let output = new Display(viewModel);
output.update();
};
//# sourceMappingURL=main.js.map<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="random"></div>
<div id="min"></div>
<div id="max"></div>关于javascript - 无法设置未定义的属性 'max'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57619983/