总的来说，我对 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>
最佳答案
所有有效的 JavaScript 都是有效的 TypeScript，但反之则不然。
在您的 TypeScript 中存在一些范围问题。
在下面的函数中，您声明了 4 个仅存在于该函数范围内的变量。返回未定义。
function timeGenerate() {
let time = new Date();
let hours = time.getHours();
let minutes = time.getMinutes();
let seconds = time.getSeconds();
}
这里您调用的是 timeGenerate 函数，该函数不执行任何操作，使用 undefined variable 创建一个新时钟，并调用 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'))关于javascript - 如何在 TypeScript 中制作时钟？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47897118/