三、TypeScript的环境安装

搭建TypeScript开发环境

所谓搭建TypeScript开发环境，就是安装TypeScript的compiler.

 

那么什么是compiler?为什么需要compiler?

因为ES6规范是在2015年发布的，而目前所有的主流的浏览器并没有完全的支持ES6规范，所以用ES6语法写出来的程序，并不能直接放到浏览器里面去执行，所以需要一个compiler去把TypeScript代码转化成JavaScript代码，才能放到浏览器里面去跑。

 

使用在线compiler开发

使用在线compiler开发，这应该是TypeScript开发最方便的一种方式，因为根本没用所谓的安装过程，你只要安装一个浏览器就可以了，

访问TypeScript官方网站 http://www.typescriptlang.org/，
访问在线compiler开发 http://www.typescriptlang.org/play/index.html

我们可以看到左边是Typescript代码，右边是编译以后的Javascript代码，
我们接下来将展示大部分的TypeScript的语法特性。

 

使用本地compiler 开发

刚才我们演示了线上的compiler，但是在实际项目中我们肯定不能用在线的compiler去开发，因为我们肯定会写很多的TypeScript文件，肯定是在我们本地的环境里面开发，下面我们就来演示如何搭建本地的开发环境。

 

第一步：安装Typescript的编译器

所谓安装TypeScript的编译器就是安装TypeScript的过程,你需要先安装node.js，不知道先百度一下怎么装node.js

sudo npm install -g typescript

查看TypeScript cpmplier的版本号

tsc --version

新建一个ts文件 Hello.ts

export class Hello{

}

使用命令行进入刚才那个文件目录的位置

cd 那个ts文件的目录

运行tsc命令

tsc Hello.ts

我们去文件夹里面看一下，发现文件夹里面生成了一个Hello.js

"use strict"
var Hello = (function () {
      function Hello() {

       }
       return Hello;
}());
exports,Hello = Hello;

这个Hello.js就是编译之后产生的JavaScript文件，也就是我们最终会放到浏览器里面执行的代码。

现在我们已经看到编译器如何使用了，但是这个过程还是稍微有点麻烦的。也就是说我们要先写ts文件，然后再使用命令行工具，然后再使用命令行工具进入这个目录再去操作.

在前面讲到TypeScript的优势的时候就重点提到过强大IDE的支持。

下面我们就演示一下在IDE里面是怎么来做TypeScript开发的

前面演示的过程就是在IDE里面发生的事情，IDE只是帮助我们去执行tsc Hello.ts的这个命令

 

我们打开webstorm，新建一个Hello的项目，在里面建一个Hello.ts

我们可以发现我们开始编辑点回车以后它会有一个提示，问我们要不要把TypeScript文件编译成JavaScript文件，
后面有个OK 或 No的选项；

这时候我们发现了它强大的语法提示，我们只要回车选择就可以了。

我们编写完成可以直接点击右上角的OK，也可以点击Configure去配置，如果我们点击Configure配置，有一个Enable TypeScript Compiler,我们把它勾上，这样配置之后，这个项目里开发的所有ts文件它都会帮我们自动编译成js文件。

这时候我们发现在IDE里面的编译方式比我们使用命令行的方式效率要高很多。

这就是本地的TypeScript本地开发环境搭建，现在我们已经把这个环境搭建起来了。在这个环境下我们就可以直接去写ts代码了。