🥤typescript tutorial

Appearance

Return to top
On this page

TypeScript "Hell0, World!"

摘要：在本教程中，你将学习如何用 TypeScript 开发 Hello World 程序。

node.js 中的 TypeScript Hello World 程序

首先，创建一个新的文件夹来存放代码，例如，helloworld。

第二，启动 VS Code 并打开该文件夹。

第三，创建一个名为app.ts的新 TypeScript 文件。TypeScript 文件的扩展名是.ts。

第四，在app.ts文件中输入以下源代码。

ts
let message: string = 'Hello, World!';
console.log(message);

第五，通过使用键盘快捷键Ctrl+`或按照菜单终端>新终端，在 VS 代码中启动一个新终端。

第六，在终端上输入以下命令来编译app.ts文件。

如果一切正常，你会看到一个被 TypeScript 编译器生成的名为 app.js 的新文件。

要在 node.js 中运行 app.js 文件，你可以使用以下命令。

shell
node app.js

如果你安装了设置 TypeScript 开发环境中提到的ts-node模块，你可以只用一个命令来编译 TypeScript 文件并一次性执行输出文件。

shell
ts-node app.ts

Web 浏览器中的 TypeScript Hello World 程序

你按照这些步骤创建一个网页，在 Web 浏览器上显示 "Hello, World!"信息。

首先，创建一个名为 index.html 的新文件，并包括 app.js，如下所示。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript: Hello, World!</title>
</head>
<body>
    <script src="app.js"></script>
</body>
</html>

第二，将 app.ts 的代码改为如下：

ts
let message: string = 'Hello, World!';
// create a new heading 1 element
let heading = document.createElement('h1');
heading.textContent = message;
// add the heading the document
document.body.appendChild(heading);

第三，编译 app.ts 文件：

shell
tsc app.ts

第四，通过鼠标右键单击 index.html 并选择 Open with Live Server，从 VS Code 中打开 Live Server。

Live Server 将打开 index.html 并展示下面信息：

要做些改变，你需要编辑 app.ts 文件。比如说：

ts
let message: string = 'Hello, TypeScript!';

let heading = document.createElement('h1');
heading.textContent = message;

document.body.appendChild(heading);

然后编译 app.ts 文件：

shell
tsc app.ts

TypeScript 编译器将生成一个新的 app.js 文件，Live 服务器将自动在网络浏览器上重新加载它。

注意，app.js 是 app.ts 文件的输出文件，因此，你千万不要直接改变这个文件中的代码，否则一旦你重新编译 app.ts 文件，你将失去这些改变。

在本教程中，你已经学会了如何在 TypeScript 中创建第一个名为 Hello, World！的程序，它可以在 node.js 和网络浏览器上运行。