标签：

学习任何的开发，我们都需要对应的环境：包括TypeScript的编译环境和开发工具。
这个章节里面，我们就来完成它们的搭建，后续就可以愉快的来写TypeScript代码了。

一. 环境搭建
1.1. TypeScript环境安装
已经配置好的环境，大家可以直接下载：https://github.com/coderwhy/HYLearnTS.git
在上一个章节中我们说过，TypeScript最终会被编译成JavaScript代码：

Image01
TypeScript运行流程
那么我们必然需要对应的编译环境：
?首先，TypeScript的环境安装依赖Node，所以需要先保证电脑上有Node和NPM环境；
?其次，可以通过NPM来安装TypeScript，之后就可以通过?tsc?来编译TypeScript的代码；
首先来进行全局安装：

安装命令

npm install typescript -g

查看版本

tsc --version
注意：这里我使用了git bash的终端，你可以直接使用windows的命令行工具

Image02
安装TypeScript
1.2. VSCode环境搭建
学习或者使用TypeScript有很多编辑器可以供我们选择，目前前端开发比较常用的是两个：
?WebStorm：JetBrains ?公司的产品，用法和PHPStorm、PyCharm、IDEA用法基本一致；
?VSCode：Microsoft 公司的产品，目前可以说已经成为最流行的前端工具，并且本身就是TypeScript编写的；
在之前的Flutter文章中我有对比过VSCode和Android Studio的优缺点，其实和VSCode和WebStorm的优缺点对比是相似的，这里不再详细对比。
而以后学习和使用TypeScript，我都会优先选择VSCode，所以这里我们主要介绍VSCode的环境搭建。

下载安装VSCode
?下载地址：https://code.visualstudio.com/
?下载后直接安装即可

安装对应的插件
?VSCode的另外一个强大的地方就是已经有很多好用的插件了；
?我个人针对于前端安装过的插件有：open in browser、 Vetur 、 TSLint 、 Bracket Pair Colorizer等；
?这里我不再给出截图，因为我还针对Python、Java、Flutter装过很多的插件，会干扰大家；
1.3. tsc简单代码测试
上面步骤完成后，我们就可以在VSCode中编写我们的TypeScript代码，并且通过一些方法来进行测试。

打开VSCode，并且新建两个文件：index.ts
index.ts代码如下：
// 定义一个变量
let message: string = "abc";
message = 123;

// 定义一个函数
function sum(num1: number, num2: number): number {
return num1 + num2;
}

sum("abc", "cba");
我们会发现有两个地方都会报错：
错误一：不能将类型“123”分配给类型“string”

Image03

错误一
错误二：类型“"abc"”的参数不能赋给类型“number”的参数

Image04
错误二
上面两个错误都是因为我们的代码已经增加了类型约束，不能随便赋值其他类型给我们的变量。
将代码修改正确如下：
// 定义一个变量
let message: string = "abc";
message = "Hello World";

// 定义一个函数
function sum(num1: number, num2: number): number {
return num1 + num2;
}

sum(20, 30);

将代码编译为JavaScript的代码
因为我们说过，代码最终运行在浏览器上，而浏览器是不识别TypeScript代码的，我们需要对他们进行编译：
打开VSCode的终端，在其中输入如下命令来编译我们的TypeScript：
tsc index.ts

Image05
查看结果
我们会发现，生成了一个index.js文件，并且其中的代码就是普通的JavaScript代码。

JavaScript代码的测试
如果我们希望测试这段JavaScript代码就非常简单了，两种方式都可以：
?方式一：使用node直接执行JavaScript代码；
?方式二：创建一个html文件，在其中引入index.js文件，并且在浏览器中进行测试；
这里不再给出具体的步骤，，大家可以自行去测试
问题：每次都这样测试会不会太麻烦了呢？
如果每次我们写完一个TypeScript代码都需要像上面的步骤一样，一点点去完成测试就会过于麻烦，我们可以怎么做呢？
?直接配置webpack，让webpack对我们编写的代码进行一个编译，并且自动引入编译后的js文件；
?而且webpack可以在代码修改后重新帮助我们进行编译，并且自动刷新浏览器，不需要手动操作；
二. 项目环境
如果实在不会搭建，可以从我的GitHub上直接下载我已经搭建好的模板：记得点个star
GitHub地址：