1.4 开始第一个TypeScript文件
在TypeScript开发环境搭建完成后，就可以正式进入TypeScript程序开发了。本节通过创建一个简单的TypeScript程序让读者首先从感性上直观地了解TypeScript的编码、编译和运行基本过程。
按照惯例，学习一门新的语言，第一个程序往往都是HelloWorld。我们也遵循这样的习惯，定义一个helloWorld函数，让TypeScript打印出“Hello, My First TypeScript”。
1.4.1 选择TypeScript编辑器
工欲善其事，必先利其器。虽然可以用任何文本编辑器进行TypeScript程序的开发，但是借助强大的编辑器既可以提高开发效率，也可以通过类型检测等手段保证代码质量。从TypeScript官网可以看出编辑器还是比较多的，如图1.12所示。
图1.12 TypeScript常用的编辑器
Visual Studio 2017/2015安装所需空间比较大，比较消耗电脑资源，我们也可以选择微软的开源轻量级编辑器Visual Studio Code来开发，而且Visual Studio Code是跨操作系统的，不但可以在Window操作系统上进行程序开发，也可以在Linux和Mac中进行开发。
微软在2015年4月30日的Build开发者大会上正式宣布了Visual Studio Code项目，一个运行于Mac OS X、Windows和Linux之上的，针对编写现代Web和云应用的跨平台源代码编辑器。Visual Studio Code对Web开发的支持尤其好，同时支持多种主流语言，例如C#、Java、PHP、C++、JavaScript和TypeScript等。
在网站https://code.visualstudio.com/download中可以下载安装文件，这里下载的是Window 64位1.31.1版本。下载完成后双击VSCodeUserSetup-x64-1.31.1.exe进行安装，如图1.13所示。
图1.13 Visual Studio Code 安装界面
按照向导操作即可，最后完成Visual Studio Code的安装。
提示
Visual Studio Code默认情况下是不包含TypeScript语言的，但可以通过安装插件来开发TypeScript，同时Visual Studio Code通过插件还支持C#、Java和PHP等语言。
对于单个文件而言，用在线的编辑器进行编码会更加方便，在TypeScript官网上有一个练习（Playground）链接，即http://www.typescriptlang.org/play/index.html，具体界面如图1.14所示。
图1.14 在线TypeScript Playground 界面
提示
TypeScript Playground只能编写单个文件。使用它本地无须安装任何TypeScript环境。
由图1.14可以看出，在左边的区域是TypeScript脚本，其中【编译项】按钮可以配置一些编译选项。当修改TypeScript脚本时，右边会自动转译成对应的JavaScript代码。当单击右边的【运行】按钮时，即可执行右边生成的JavaScript代码。
本书中前几章的演示代码只要是单文件的形式都可以在TypeScript官网上Playground提供的在线编辑器上运行。
1.4.2 编写TypeScript文件
当Visual Studio Code（VSCode）完成安装后，双击桌面快捷方式打开VSCode编辑器，在【File】菜单下单击【New File】创建一个新文件，并保存为helloworld.ts。
TypeScript编码有一些指导规则，函数命名采用camelCase命名规则，也就是首字母小写、其他单词首字母大写。文件helloworld.ts的内容如代码1-2所示。
【代码1-2】 helloWorld函数：helloworld.ts
01 /**
02 * 第一个TS程序（注释用于代码提示）
03 * @param <msg 字符串类型>
04 * @return(字符串)
05 */
06 function helloWorld(msg:string):string{
07 return "Hello, " + msg;
08 }
09 let msg = "My First TypeScript";
10 document.body.innerHTML = helloWorld(msg);
从上述代码中可以看出，helloWorld的函数上用/**...*/写了一段注释。TypeDoc可以自动根据写在/** ... */之间的注释生成api文档。在Visual Studio Code中打开helloworld.ts，如图1.15所示。
图1.15 Visual Studio Code编辑界面
1.4.3 编译TypeScript文件
前面提到，TypeScript文件需要经过编译器编译后转成原生JavaScript代码才能执行。因此，为了运行helloworld.ts中的代码，需要对helloworld.ts文件进行编译。这里用Windows命令行工具调用tsc命令编译helloworld.ts，命令如下：
tsc helloworld.ts
编译成功后，会在helloworld.ts同一个目录下生成一个helloworld.js文件，内容如代码1-3所示。
【代码1-3】 helloworld.ts编译后代码：helloworld.js
01 /**
02 * 第一个TS程序
03 * @param <msg>
04 * @return(string)
05 */
06 function helloWorld(msg) {
07 return "Hello, " + msg;
08 }
09 var msg = "My First TypeScript";
10 document.body.innerHTML = helloWorld(msg);
从代码1-3可以看出，TypeScript代码和生成的JavaScript代码很相似。
提示
在Visual Studio Code中需要经过配置才能自动进行TypeScript文件编译。
当然也可以同时编译多个.ts文件，语法如下：
tsc file1.ts, file2.ts
tsc常用编译参数如表1.3所示。
表1.3 tsc 常用编译参数
1.4.4 在网页中调用TypeScript文件
我们编写的helloworld.ts代码如何在浏览器里面运行呢？一般来说，浏览器不能直接嵌入TypeScript文件，而是嵌入TypeScript文件编译后对应的JavaScript文件。下面创建一个index.html来作为容器，将编译好的helloworld.js引入。index.html具体内容如代码1-4所示。
【代码1-4】调用helloworld.ts生成的helloworld.js文件：index.html
01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04 <meta charset="UTF-8">
05 <meta name="viewport" content="width=device-width,
initial-scale=1.0">
06 <meta http-equiv="X-UA-Compatible" content="ie=edge">
07 <title>index</title>
08 </head>
09 <body>
10 <!-- 引入文件 -->
11 <script src="helloworld.js" ></script>
12 </body>
13 </html>
用浏览器打开index.html，可以看到页面上打印出“Hello,My First TypeScript”的文本信息，界面如图1.16所示。
图1.16 index.html运行界面
提示
虽然通过动态编译技术可以在浏览器中直接嵌入TypeScript文件，但是一般不建议这么做。