Learn TypeScript 3 by Building Web Applications

上QQ阅读APP看书，第一时间看更新

Defining the basic application structure

In this first project, we will create a fairly simple web application. Usually, web applications start and end with HTML. Here's what we will do:

We will create the user interface of our application using a single HTML file called index.html.

We will put as much logic as we can in TypeScript code, in a single file called todo-it.ts.
We will make sure that our HTML file loads the compiled version of our code (that is, JavaScript code).

Go ahead and create an index.html file at the root of the project. This will be the entry point for our application. For now, just add the following to it:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>TodoIt</title> 
</head> 

<body id="todoIt" style="text-align: center"> 
    <h1>TodoIt</h1> 
    <p>TODO</p>
</body> 
</html>

This is a simple HTML5 starting point, nothing fancy. For now, this doesn't do much, but we'll come back to it soon.

Next, create a TypeScript file called todo-it.ts, and add the following code to it:

console.log("TodoIt");

This will help us validate that we've got the setup right.