Question

我一般都是TypeScript和OOP的新手。我需要将简单的数字时钟作为家庭作业。我必须上课。我在JS中制作它更容易，所以我做到了它并且工作正常。现在我试图将它“反转”为TypeScript。我还必须添加更改时区的功能。

请帮忙！

我的JS版本看起来像这样：

var clock = document.getElementById('clock');

function Clock() {
  var time = new Date();
  var hours = time.getHours().toString();
  var minutes = time.getMinutes().toString();
  var seconds = time.getSeconds().toString();

  if (hours.length < 2) {
    hours = '0' + hours;
  }

  if (minutes.length < 2) {
    minutes = '0' + minutes;
  }

  if (seconds.length < 2) {
    seconds = '0' + seconds;
  }

  var clockStr = hours + ' : ' + minutes + ' : ' + seconds;

  clock.textContent = clockStr;

}

Clock();
setInterval(Clock, 1000);

我在TypeScript中的不工作代码如下所示：

class Clock {

    hours:number;
    minutes:number;
    seconds:number;

    constructor(hours:number, minutes:number, seconds:number) {

        this.hours = hours;
        this.minutes = minutes;
        this.seconds = seconds;

    }

    print() {

        if (hours.length < 2) {
          hours = '0' + hours;
        }

        if (minutes.length < 2) {
          minutes = '0' + minutes;
        }

        if (seconds.length < 2) {
          seconds = '0' + seconds;
        }

        var clockStr = hours + ' : ' + minutes + ' : ' + seconds;

    }

}

function timeGenerate() {

    let time = new Date();
    let hours = time.getHours();
    let minutes = time.getMinutes();
    let seconds = time.getSeconds();

}

function clockRun() {

    timeGenerate();
    let newClock = new Clock(hours, minutes, seconds);
    newClock.print();

}


clockRun();
setInterval(clockRun, 1000);

document.getElementById('tsClock').innerHTML = newClock;

我的HTML：

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typescript Clock</title>

    <style>
        body {
        background-color: royalblue;    
        font-family: 'Lato';
        margin-top: 300px;
        text-align: center;
        color: ivory;
        }

        #clock {
        font-weight: 300;
        font-size: 100px;
        }
    </style>


</head>

<body>

  <h1 id="tsClock"></h1>
  <script src="app.js"></script>

</body>
</html>

Answer 1

所有有效的JavaScript都是有效的TypeScript，但不是相反。

在TypeScript中存在一些范围问题。

在以下函数中，您将声明4个仅存在于此函数范围内的变量。返回undefined。

function timeGenerate() {
    let time = new Date();
    let hours = time.getHours();
    let minutes = time.getMinutes();
    let seconds = time.getSeconds();
}

在这里，您调用timeGenerate函数，该函数不执行任何操作，使用未定义的变量创建新时钟，并调用print()。

function clockRun() {
    timeGenerate();
    let newClock = new Clock(hours, minutes, seconds);
    newClock.print();
}


clockRun();
setInterval(clockRun, 1000);

这是一个有效的，最简单的例子（保持简单！）

    class Clock {
    // Declare a class variable of type "Element" called el
    el: Element;

    /**
     * Called when "new" is invoked, you'll pass your target element here.
     * @param element Target element to update
     */
    constructor(element) {
        this.el = element;

        // Immediately kick off a setInterval to this objects "run" method,
        // every 1000ms like you had before.
        setInterval(() => this.run(), 1000)
    }
    
    /**
     * This *could* be in the constructor, but for seperation of duties we'll
     * make it a method.  This method is invoked every ~1000ms (JavaScript timers
     * aren't perfect).
     */
    run() {
        var time = new Date();
        // Don't need to call toString, but it's fine here. When you start
        // concatenating numbers onto strings they get converted anyway.
        var hours = time.getHours().toString();
        var minutes = time.getMinutes().toString();
        var seconds = time.getSeconds().toString();
        
        // Your previous logic.
        if (hours.length < 2) {
        hours = '0' + hours;
        }
    
        if (minutes.length < 2) {
        minutes = '0' + minutes;
        }
    
        if (seconds.length < 2) {
        seconds = '0' + seconds;
        }
        var clockStr = hours + ' : ' + minutes + ' : ' + seconds;
        
        // Update this class' "el" variable as before.
        this.el.textContent = clockStr;
    }
    }

    // Create a new instance of Clock, passing in your target DOM element.
    const clock = new Clock(document.getElementById('clock'))

Codepen

Answer 2

在我们查看代码之前。您需要知道浏览器无法读取打字稿。所以你应该把它编译成JavaScript（ES 5）。因此，您的 index.html 应该导入已编译的JavaScript而不是typescript文件。

现在让我们转到您的代码：

class Clock {

    hours:number;
    minutes:number;
    seconds:number;

    constructor(hours:number, minutes:number, seconds:number) {

        this.hours = hours;
        this.minutes = minutes;
        this.seconds = seconds;

        this.clockRun();
        setInterval(this.clockRun, 1000);

        document.getElementById('tsClock').innerHTML = newClock;

    }

    print() {

        if (hours.length < 2) {
          hours = '0' + hours;
        }

        if (minutes.length < 2) {
          minutes = '0' + minutes;
        }

        if (seconds.length < 2) {
          seconds = '0' + seconds;
        }

        var clockStr = hours + ' : ' + minutes + ' : ' + seconds;

    }

}

 timeGenerate() {

    let time = new Date();
    let hours = time.getHours();
    let minutes = time.getMinutes();
    let seconds = time.getSeconds();

}

 clockRun() {

    this.timeGenerate();
    let newClock = new Clock(hours, minutes, seconds);
    this.print();

}

如何在TypeScript中制作时钟？

2 个答案: