如何在 Angular 中将此 JS 代码转换为现代 TypeScript？

Question

我正在尝试将此 JS 代码转换为现代 TypeScript 以便在 Angular 6 中使用。

function run(interval, frames) {
    var int = 1;

    function func() {
        document.body.id = "b"+int;
        int++;
        if(int === frames) { int = 1; }
    }

    var swap = window.setInterval(func, interval);
}

run(1000, 10); //millisec

我做了一些改进，但仍然没有按预期工作。如何将其完全转换为 TypeScript 以完美地使用 Angular？

Answer 1

我在这里扩展了 SiddAjmera 的回答。我已经用匿名箭头函数替换了run 中的func() 函数。我已经删除了 any 类型（你永远不应该使用它）。

我已将代码放在 Angular 组件中。

class TestAngular {

  int:number
  swap:number

  run(interval: number, frames: number) {

    this.int = 1

    this.swap = window.setInterval(()=>{
        console.log(this.int)
        this.int++
        if (this.int == frames) {
           this.int = 1
        }
    }, interval)

}


let s = new TestAngular()
s.run(500,10)

Answer 2

因为 TypeScript 是 JavaScript 的超集。每个普通的 JavaScript 都是完全有效的 TypeScript。

话虽如此，下面是介绍强类型和现代 ES6 语法的方法：

function run(interval: number, frames: number) {
  let int: any = 1;

  function func() {
    document.body.id = "b" + int;
    int++;
    if (int === frames) {
      int = 1;
    }
  }

  const swap = window.setInterval(func, interval);
}

run(1000, 10); //millisec

注意：我刚刚为run 函数的参数添加了类型。我还设置了任何类型的int，因为您将其添加到字符串中，然后也将其递增。您可以通过将其粘贴到TypeScript Playground 来检查它是否有效。它应该会给你任何错误。