Question

目前我在edx.org上做了关于Typescript2的教程。但我需要自我评估实验室的一些帮助：

“现在您已经学习了如何使用TypeScript的基础知识，您将使用以下参数制作一个简单的骰子滚动应用程序：

在您的应用程序中使用以下类型：Array，number，string，Boolean。

使用枚举来声明可能的滚动值（提示：它们不一定是数字）。

使用类来创建骰子，包括所需CSS样式的类型属性（长度，宽度，边框，颜色）以及骰子中包含的值。

创建一个界面来描述你的骰子类型。

使用dieRoller类扩展类以创建滚动骰子的方法。

使用dieRoller类创建一个实例化骰子的函数，使用constructor（）函数绑定元素。

创建一个按钮，一次滚动所有骰子。

成品应该看起来像这样，并且当按下“掷骰子”按钮时，应该从每个骰子的枚举中随机生成不同的值。“

应该有四个骰子，然后是一个按钮（全部在一行中）。

我的问题是我无法只创建一个按钮或者我不能使用rolleDice（）（如果我在类之外声明按钮...通常可能会在外面声明它并创建一个实例class ...但不知道怎么做，因为类有一个带参数的构造函数）。所以也许你有一个想法...或者我只是想念这个任务？：/

谢谢！

class diceRoller {
    span: Element;
    constructor(span: Element) {
        this.span = span;
    }
    rolleDice(diceValue: number): boolean {
        (<HTMLElement>this.span).textContent = diceValues[diceValue];
        return true;
    }
}
class dice extends diceRoller {
    button: Element = document.createElement('button');
    constructor(span: Element) {
        super(span);
        (<HTMLElement>span).style.cssText = "border: 5px solid black; display: inline-block; height: 50px;  width: 50px; margin: 2px"; 
        this.button.textContent = "Role Dice";      
        document.body.appendChild(this.button);  
    }
}
enum diceValues {
    one,
    two,
    three,
    four,
    five,
    six
}
interface diceTypes {
    span: Element;
}
let Elements: Array<diceTypes> = [];
for (let index: number = 0; index < 5; index++) {
    Elements.push({
        'span': document.createElement('span'),
    });
}
let getRandomIntInclusive: Function = (min, max) => {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
Elements.map((elem, index) => {
    let cube = new dice(elem.span);
    let button: Element = document.createElement('button');
    document.body.appendChild(elem.span);
});

Answer 1

在任务中说dieRoller延伸死亡，而不是die延伸dieRoller。 Die只是一个立方体，dieRoller是一个带方法的立方体。

我还为RollButton创建了一个单独的类，它有一个方法可以获取所有骰子的数组并触发它的rollDice方法。

有一件事我不确定是否有更多美容方式不使用两个单独的数组 - 对于Elements和diceCollection，只是为了diceCollection。

在更理想的方式中，我看到包含Dice实例和RollButton数组的大类。

DiceValues从1开始也很酷。

无论如何它有效但欢迎重构。 http://jsbin.com/rahewuhije/edit?js,output

class Dice {
    span: Element;
    constructor(span: Element) {
        this.span = span;
    }
}
class DiceRoller extends Dice {
    // button: Element = document.createElement('button');
    constructor(span: Element) {
        super(span);
        (<HTMLElement>span).style.cssText = "border: 5px solid black; display: inline-block; height: 50px;  width: 50px; margin: 2px"; 
        // this.button.textContent = "Role Dice";      
        // document.body.appendChild(this.button);  
    }
    rolleDice(diceValue: number): boolean {
        (<HTMLElement>this.span).textContent = DiceValues[diceValue];
        return true;
    }
}

class DiceRollerButton {
  button: Element;
  constructor(button: Element) {
    this.button = button;
    (<HTMLElement>this.button).style.cssText = "display: inline-block;";
    this.button.textContent = "Roll!";
    document.body.appendChild(this.button);
  }

  roll(diceCollection: Array<DiceRoller>) {
    diceCollection.forEach((item) => {
      item.span.textContent = DiceValues[getRandomIntInclusive(1, 6)];
    });
  }
}

enum DiceValues {
    one = 1,
    two,
    three,
    four,
    five,
    six
}
interface DiceTypes {
    span: Element;
}
let Elements: Array<DiceTypes> = [];

let diceCollection: Array<DiceRoller> = [];

for (let index: number = 0; index < 5; index++) {
    Elements.push({
        'span': document.createElement('span'),
    });
}
let getRandomIntInclusive: Function = (min, max) => {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
Elements.map((elem, index) => {
    let cube = new DiceRoller(elem.span);
    // let button: Element = document.createElement('button');
    document.body.appendChild(elem.span);

    diceCollection.push(cube);
});

let diceRollerButton = new DiceRollerButton(document.createElement('button'));

diceRollerButton.button.onclick = (event): void => {
  diceRollerButton.roll(diceCollection);
}

Dice Rolling Application Typescript

1 个答案: