三、TypeScript的环境安装

傷城~ 2022-05-15 00:30 234阅读 0赞

# 搭建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

![70][]

我们可以看到左边是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的优势][TypeScript]的时候就重点提到过强大IDE的支持。

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

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

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

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

![70 1][]

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

![70 2][]

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

![70 3][]

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

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

[70]: /images/20220515/ab56165d9b7d40d8a870691d845cd0df.png
[TypeScript]: https://blog.csdn.net/xyphf/article/details/81944554
[70 1]: /images/20220515/ee41c2bca2044b2890d38aed5912f16f.png
[70 2]: /images/20220515/e09ef3cea8a14854a402e194047a5061.png
[70 3]: /images/20220515/2b292657ff9d49f88026c4b8417a69d9.png