我一般都是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个仅存在于此函数范围内的变量。返回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'))就在我们完成您的代码之前。您需要知道浏览器无法读取打字稿。所以你应该把它编译成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();
}