Typescript 骰子滚动应用程序类型脚本

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

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

在应用程序中使用以下类型：数组、数字、字符串、布尔值

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

使用类创建模具，包括所需CSS样式（长度、宽度、边框、颜色）和模具中包含的值的类型化属性

创建一个描述模具类型的界面

使用dieRoller类扩展该类，以创建滚动模具的方法

创建一个函数，使用dieRoller类实例化dice，使用构造函数（）函数绑定元素

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

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

应该有四个骰子和一个按钮（都在一行）

我的问题是我不能只创建一个按钮，或者我不能使用rolleDice（）（如果我在类外声明按钮…通常人们可能会在类外声明它并创建类的实例…但不知道如何做，因为类有一个带参数的构造函数）。 也许你有个主意。。。或者我只是误解了任务/

谢谢你

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

类压路机{
跨度：元素；
构造函数（跨度：元素）{
这个.span=span；
}
rolleDice（diceValue:number）：布尔值{
（this.span）.textContent=diceValues[diceValue]；
返回true；
}
}
类骰子扩展骰子辊{
按钮：Element=document.createElement（'button'）；
构造函数（跨度：元素）{
超级（span）；
（span）.style.cssText=“边框：5px纯黑色；显示：内联块；高度：50px；宽度：50px；边距：2px”；
this.button.textContent=“角色骰子”；
document.body.appendChild（此.按钮）；
}
}
枚举值{
一,，
二,，
三,，
四,，
五,，
六
}
接口类型{
跨度：元素；
}
let元素：数组=[]；
for（让索引：number=0；索引<5；索引++）{
元素。推({
“span”：document.createElement（'span'），
});
}
让GetRandomInInclusive:函数=（最小值，最大值）=>{
min=数学单元（min）；
最大值=数学楼层（最大值）；
返回Math.floor（Math.random（）*（max-min+1））+min；
}
Elements.map（（元素，索引）=>{
让立方体=新骰子（元素跨度）；
let按钮：Element=document.createElement（'button'）；
document.body.appendChild（元素span）；
}); 

在任务中说模具辊延伸模具，而不是模具延伸模具辊。模具只是一个立方体，模具辊是一个立方体的方法

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

有一件事我不确定是否有更好的方法不使用两个单独的数组-用于元素和diceCollection，但仅用于diceCollection

在更理想的情况下，我看到了包含骰子实例和RollButton数组的大型类

同样，从1开始计算值也很酷

无论如何，它是可行的，但重构是受欢迎的

类骰子{
跨度：元素；
构造函数（跨度：元素）{
这个.span=span；
}
}
类骰子{
//按钮：Element=document.createElement（'button'）；
构造函数（跨度：元素）{
超级（span）；
（span）.style.cssText=“边框：5px纯黑色；显示：内联块；高度：50px；宽度：50px；边距：2px”；
//this.button.textContent=“角色骰子”；
//document.body.appendChild（此.按钮）；
}
rolleDice（diceValue:number）：布尔值{
（this.span）.textContent=DiceValues[diceValue]；
返回true；
}
}
类滚动按钮{
按钮：元素；
构造函数（按钮：元素）{
this.button=按钮；
（this.button）.style.cssText=“显示：内联块；”；
this.button.textContent=“滚动！”；
document.body.appendChild（此.按钮）；
}
掷骰子（骰子集合：阵列）{
diceCollection.forEach（（项目）=>{
item.span.textContent=DiceValues[GetRandomInInclusive（1,6）]；
});
}
}
枚举值{
1=1，
二,，
三,，
四,，
五,，
六
}
接口类型{
跨度：元素；
}
let元素：数组=[]；
让集合：数组=[]；
for（让索引：number=0；索引<5；索引++）{
元素。推({
“span”：document.createElement（'span'），
});
}
让GetRandomInInclusive:函数=（最小值，最大值）=>{
min=数学单元（min）；
最大值=数学楼层（最大值）；
返回Math.floor（Math.random（）*（max-min+1））+min；
}
Elements.map（（元素，索引）=>{
让立方体=新的骰子滚轮（元素跨度）；
//let按钮：Element=document.createElement（'button'）；
document.body.appendChild（元素span）；
骰子收集。推（立方体）；
});
让diceRollerButton=newdicerollerbutton（document.createElement（'button'））；
diceRollerButton.button.onclick=（事件）：void=>{
骰子滚动按钮。滚动（骰子收集）；
}

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