将 JavaScript 转换为 TypeScript 时出现的问题

Question

I've got a huge SCSS style-sheet with some JS files related to it from the UI team in my current project. My task is to convert (reuse) the JS code they created to TypeScript (as the app is in Angular).

Please give me advice, about what is needed to be done to the code below to make it possible. No need to rewrite the whole code for me; if you can just point out what actions have to be done and/or share some references, you will save my life.

As for now, I've already added property declarations and tried to change this.element.querySelector to document.querySelector and so on, but nothing is working as for now…

The whole code (without animations & before conversion) is:

class ChangeButton {
constructor(element) {
  this.element = element;
  this.container = this.element.querySelector('.switch-box-contents');
  this.content = this.element.querySelectorAll('.switch-box-content');
  this.on = this.container.querySelectorAll('.switch-box-content')[0];
  this.off = this.container.querySelectorAll('.switch-box-content')[1];

  this.ChangeButton = this.element.querySelector('.switch-button');
  this.ChangeButtonContainer = this.ChangeButton.querySelector('.switch-button-contents');
  this.textOn = this.element.querySelectorAll('.switch-button-txt')[0];
  this.textOff = this.element.querySelectorAll('.switch-button-txt')[1];

  this.checkbox = this.element.querySelectorAll('.switch-box-content-input');

  this.ngOnInit();
  this.bind();
}

ngOnInit() {
  const height = this.on.clientHeight;
  this.container.style.height = `${height}px`;
  this.off.classList.remove('-hidden');

  const txtHeight = this.textOn.clientHeight;
  this.ChangeButtonContainer.style.height = `${txtHeight}px`;
  this.textOff.classList.remove('-hidden');
}

contentOff() {
  const height = this.on.clientHeight;
  this.on.classList.remove('-active');
  this.off.classList.add('-active');

  anime({
...
  });

  const containerHeight = this.off.clientHeight;
  anime({
...
  });

  const txtHeight = this.textOn.clientHeight;
  anime({
...
  });
}

contentOn() {
  this.on.classList.add('-active');
  this.off.classList.remove('-active');
  anime({
...
  });

  const containerHeight = this.on.clientHeight;
  anime({
...
  });

  anime({
...
  });
}

getCheckbox() {
  const content = this.container.querySelectorAll('.switch-box-content');
  const activeContent = [].map.call(content, (element) => {
    return element;
  }).filter((element) => {
    return element.classList.contains('-active')
  })[0];
  return activeContent.querySelector('.switch-box-content-input');
}

check(currentCheckbox) {
  if(this.element.classList.contains('-select')) {
    currentCheckbox.checked = false;
    this.element.classList.remove('-checked')
  }
}

handleEvent(e) {
  const on = this.ChangeButton.classList.contains('-on');
  switch (e.type) {
    case 'click' :
      const checkbox = this.getCheckbox();
      if(on) {
        this.ChangeButton.classList.remove('-on');
        this.contentOff();
      } else {
        this.ChangeButton.classList.add('-on');
        this.contentOn();
      }
      this.check(checkbox);
      break;
    case 'change' :
      const chekbox = this.getCheckbox();
      if(chekbox.checked) {
        this.element.classList.add('-checked')
      } else {
        this.element.classList.remove('-checked')
      }
      break;
  }
}

bind() {
  this.content.forEach((content) => {
    content.addEventListener('click', () => {})
  });
  this.ChangeButton.addEventListener('click', this, false);
  this.checkbox.forEach((checkbox) => {
    checkbox.addEventListener('change', this, false);
  })
}
}

Answer 1

Looks like a large part of this is class based and added / removed on user click. I would add booleans in your typescript file for each of these and then use [ngClass]="boolean ? 'yourClassName' : ''" . You can then add click event listeners to toggle the booleans - which in turn will toggle your classes.

For example :

<div [ngClass]="boolean ? 'active' : 'inactive'" (click)="boolean = !boolean"></div>

The same kind of thing can be done with style and individual style attributes.

<div [style.height]="boolean ? '10px' : '5px'" (click)="boolean = !boolean"></div>