TypeScript 快速入门

这一节我们编写并执行一个最简单的TypeScript代码，来学习TypeScript的使用。

本教程配套源代码在github上 https://github.com/jruit/typescript-tutorial

我们在本地新建一个目录typescript1-1，在该目录下新建文件demo.ts。该文件将是我们要编写的TypeScript代码文件，文件后缀名ts是TypeScript代码文件的通用后缀名。

接下来就开始编写TS代码了，有很多代码编辑器可以选择，例如VSCode、Sublime和WebStorm等。笔者主要使用的是VSCode，它不需要安装插件就可以对TypeScript进行编辑时提示，其它编辑器有的需要安装插件才能在编辑时进行类型提示。如果没有编辑时提示，那么只能等执行编译命令时我们才知道编写的代码是否有类型错误，读者根据自己的喜好选择编辑器。

编辑时提示是指在代码编辑器里编写TS代码时，编辑器会实时告诉我们代码是否有类型错误，并且将鼠标指针悬浮在变量上方时，编辑器会提示该变量的类型信息等，如下图所示，红色波浪线提示该处有错误。

我们在编辑器里输入如下代码并保存：

demo.ts

var age = 18;

然后在该目录的命令行工具里执行下面的命令：

tsc  demo.ts

这是我们会发现该目录下新生成了demo.js文件。

tsc命令是安装TypeScript后在操作系统注册的编译TS代码文件的命令，执行tsc demo.ts后就把demo.ts编译成了对应的JS文件demo.js。

我们打开demo.js，代码如下：

var age = 18;

可以看到编译生成的demo.js代码和我们编译前的demo.ts代码没有任何差别，这是因为我们的ts代码还未使用TypeScript类型相关的代码，所以编译前后代码是一样的。

现在我们修改ts代码，新代码文件名是demo2.ts，代码如下：

demo2.ts

var age: number = 18;

现在再次执行tsc demo2.ts命令进行编译，生成的demo2.js如下：

var age = 18;

可以看到编译生成的demo2.js代码和我们编译前的demo2.ts代码出现了差别，ts里的: number在编译后消失了。

: number是TypeScript里的类型注解，通过冒号:后加上类型告诉编译器它前面的变量是何种类型的，冒号:前后可以无空格或多个空格。这里的: number告诉编译器其前方的变量是一个number类型的变量。

现在我们就完成了一个最简单的TS代码编写与编译，在开发时我们编写TS代码，开发完成后通过编译将TS代码转换成JS代码，应用程序最终使用JS代码运行。

需要注意的是编译器的编译行为与TypeScript编译配置文件有关，这部分内容会在后续章节讲解，在不做特殊说明时我们使用默认的编译配置。