typescript学习

关于typescript的计算器小栗子：

class calculator {
  public np1: string = '';
  public np2: string = '';
  public transfer: string = '';
  public result: string = '';
  public content: HTMLElement;
  public resultArea: HTMLElement;
  public resultAreaSpan: HTMLSpanElement;
  public buttonLists: Array<Array<number | string>> = [
    ['clear', '÷'],
    [7, 8, 9, '×'],
    [4, 5, 6, '-'],
    [1, 2, 3, '+'],
    [0, '='],
  ];
  public width: string = '100%';
  public height: string = '60px';

  constructor() {
    this.createContent();
    this.createResultArea();
    this.createButtons()
    this.bindEvents()
  }

  createContent() {
    let content = document.createElement('div');
    content.classList.add('content');
    content.style.width = this.width
    document.body.appendChild(content);
    this.content = content
  }

  createResultArea() {
    let resultArea = document.createElement('div')
    resultArea.classList.add('resultArea')
    resultArea.style.width = this.width
    resultArea.style.height = this.height

    let span = document.createElement('span')
    span.textContent = '0'
    this.resultAreaSpan = span
    resultArea.appendChild(span)
    this.content.appendChild(resultArea)
  }

  createButtons() {
    this.buttonLists.forEach((buttonList: Array<string | number>) => {
      let div = document.createElement('div');
      div.classList.add('row');
      buttonList.forEach((text: string | number) => {
        let button = document.createElement('button')
        button.classList.add(`button_${text}`)
        button.textContent = text.toString()
        div.appendChild(button)
      })
      this.content.appendChild(div)
    })
  }

  bindEvents() {
    this.content.addEventListener('click', () => {
      let e = event.target
      if (e instanceof HTMLButtonElement) {
        const buttonContext: string = e.textContent
        const numberStr: string = '0123456789'
        const operatorStr: string = '+-×÷'

        if (numberStr.indexOf(buttonContext) > -1) {
          if (this.transfer) {
            this.np2 += buttonContext;
            this.resultAreaSpan.textContent = this.np2;
          } else {
            // this.result = '';
            this.np1 += buttonContext;
            this.resultAreaSpan.textContent = this.np1;
          }
        } else if (operatorStr.indexOf(buttonContext) > -1) {
          if (this.result) {
            this.np1 = this.result;
            this.result = '';
          }
          this.transfer = buttonContext;
        } else if ('='.indexOf(buttonContext) > -1) {
          if (this.np1!='' && this.np2!='') {
            this.result = this.getResult().toString()
            this.resultAreaSpan.textContent = this.result
            this.np1 = '';
            this.np2 = '';
            this.transfer = '';
          } else {
            this.clear()
          }
        } else {
          this.clear()
        }


      }
    })
  }

  clear() {
    this.np1 = '';
    this.np2 = '';
    this.transfer = '';
    this.result = '';
    this.resultAreaSpan.textContent = '0';
  }
  getResult() {
    let numberOne: number = parseFloat(this.np1);
    let numberTwo: number = parseFloat(this.np2);

    if (this.transfer === '+') {
      return (numberOne + numberTwo)
    } else if (this.transfer === '-') {
      return (numberOne - numberTwo)
    } else if (this.transfer === '×') {
      return (numberOne * numberTwo)
    } else if (this.transfer === '÷') {
      if (numberTwo === 0) {
        return false;
      } else {
        return (numberOne / numberTwo)
      }
    }

  }

}

new calculator()