1.3　编写第一个TypeScript程序：Hello World

搭建好TypeScript开发环境后，你就开始编写第一个TypeScript程序。本节将演示如何用TypeScript编写程序并进行静态检查。

1.3.1　编写并运行TypeScript程序

首先，创建一个名为HelloWorld.ts的文件，代码如下。

let greeting:string = "Hello World!";
console.log(greeting);

这段代码第一眼看上去和JavaScript差不多，但仔细一看，它比JavaScript多了“:string”语句，表示将变量greeting定义为string类型。

TypeScript代码需要先通过TypeScript编译器编译成JavaScript代码，然后才能在各个浏览器或平台上运行。TypeScript代码的编译过程如图1-10所示。

图1-10　TypeScript代码的编译过程

接下来，执行以下命令，编译示例代码。

$ tsc d:\TSProject\HelloWorld.ts

执行命令后，在HelloWorld.ts所在文件夹中找到编译好的JavaScript文件HelloWorld.js，打开该文件，文件内容如下。

var greeting = "Hello World!";
console.log(greeting);

接下来，将这段JavaScript代码通过<script>标签嵌入HTML，以便在浏览器中运行；你也可以通过Node.js命令直接运行。在本例中，使用Node.js命令直接运行，命令如下。

$ node d:\TSProject\HelloWorld.js

执行结果如下。

> Hello World!

1.3.2　静态检查和智能提示

通过刚才的示例，我们已经了解了编写TypeScript程序的基本过程，但这并不足以体现TypeScript的优势。

接下来，修改HelloWorld.ts文件，修改后的文件内容如下。

let greeting:string = "Hello World!";
greeting = 123
console.log(greeting)

在本例中，我们将值123赋给了刚刚定义的string类型的变量greeting。

由于开发人员忘记了greeting是string类型的变量，因此误用了变量，改变了原来的变量类型。如果使用的是JavaScript，JavaScript并不会阻止这样的用法，代码依然可以运行，至于是否有错，需要人为判断。因此，这个问题很可能潜伏很久才被发现。

但如果使用TypeScript，在代码刚写下的一瞬间，Visual Studio Code就会检测出这个问题，并显示在问题窗口中，如图1-11所示。

图1-11　错误提示

当然，有时候并没有使用Visual Studio Code，但TypeScript在运行前会经历编译环节，因此也能在运行前检测出该问题。此时，执行如下tsc命令。

$ tsc D:\TSProject\HelloWorld.ts

命令执行结果如图1-12所示，提示编译错误。

图1-12　提示编译错误

这个例子虽然简单，但想必读者从中已经能看出TypeScript的巨大优势了。

由于TypeScript需要指定变量类型，因此当变量类型确定时，也能够确定针对该变量类型的所有操作，这为智能提示打下了基础。如果使用Visual Studio Code作为IDE，每次在变量后键入句号时，都会加载出所有针对该变量的操作以供选择，如图1-13所示，这将大幅提高开发效率。

图1-13　智能提示

第一个TypeScript程序示例到这里就结束了，后面将会详细介绍TypeScript的语法和特性。

读者服务：

微信扫码关注【异步社区】微信公众号，回复“e60557”获取本书配套资源以及异步社区15天VIP会员卡，近千本电子书免费畅读。