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文件，但是一般不建议这么做。

本周热推：
Kubernetes源码剖析JavaScript脚本特效编程给力起飞可编程控制器原理及应用Java核心技术·卷Ⅱ：高级特性（原书第10版）软件测试
上一章目录下一章