Question

我正在使用打字稿制作骰子显示应用程序，我在学习它时还很陌生，但我认为我对此情况很好，但是我一直在努力解决这个问题，因为我正在使用这个骰子应用程序上。该应用程序的目的是掷骰子，最小数量为1，最大数量设置为当前窗口负载（当前为99），然后生成并在索引上显示随机数以及最小和最大值。但是，当我编译并进行测试时，我在控制台中收到此错误：

main.ts：66未捕获的TypeError：无法在window.onload（main.ts：66）上设置未定义的属性“ max”

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();
}

Answer 1

我认为是因为viewModel仍然为空。

let viewModel: viewModel;

Answer 2

您需要声明为let viewModel = new Display(ukDice);，还要在this.rand = 1;构造函数中添加Dice

"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>

无法设置未定义的属性“ max”

2 个答案: