Question

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

2019-08-23

527

javascript typescript

我正在使用 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 load (async)

(anonymous) @ main.ts:63

在 vsCode 的控制台中，我在 main.ts 文件中收到此错误控制台中的错误

"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

您需要声明为 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>

Answer 2

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

let viewModel: viewModel;

Afandi Yusuf

2019-08-23