带你一步一步搭建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的环境搭建。

1. 下载安装VSCode
   下载地址：https://code.visualstudio.com/
   下载后直接安装便可
2. 安装对应的插件
   VSCode的另一个强大的地方就是已经有不少好用的插件了；
   我我的针对于前端安装过的插件有：open in browser、 Vetur 、 TSLint 、 Bracket Pair Colorizer等；
   这里我再也不给出截图，由于我还针对Python、Java、Flutter装过不少的插件，会干扰你们；
   1.3. tsc简单代码测试
   上面步骤完成后，咱们就能够在VSCode中编写咱们的TypeScript代码，而且经过一些方法来进行测试。
3. 打开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);

2. 将代码编译为JavaScript的代码
   由于咱们说过，代码最终运行在浏览器上，而浏览器是不识别TypeScript代码的，咱们须要对他们进行编译：
   打开VSCode的终端，在其中输入以下命令来编译咱们的TypeScript：
   tsc index.ts
   Image05
   查看结果
   咱们会发现，生成了一个index.js文件，而且其中的代码就是普通的JavaScript代码。
3. JavaScript代码的测试
   若是咱们但愿测试这段JavaScript代码就很是简单了，两种方式均可以：
   方式一：使用node直接执行JavaScript代码；
   方式二：建立一个html文件，在其中引入index.js文件，而且在浏览器中进行测试；
   这里再也不给出具体的步骤，你们能够自行去测试
   问题：每次都这样测试会不会太麻烦了呢？
   若是每次咱们写完一个TypeScript代码都须要像上面的步骤同样，一点点去完成测试就会过于麻烦，咱们能够怎么作呢？
   直接配置webpack，让webpack对咱们编写的代码进行一个编译，而且自动引入编译后的js文件；
   并且webpack能够在代码修改后从新帮助咱们进行编译，而且自动刷新浏览器，不须要手动操做；
   二. 项目环境
   若是实在不会搭建，能够从个人GitHub上直接下载我已经搭建好的模板：记得点个star
   GitHub地址：

2.1. 项目环境的基础配置
为了咱们以后的学习和使用方便，咱们来配置一个webpack的环境：
在环境中咱们编写对应的TypeScript代码，让webpack自动帮助咱们编译，而且在浏览器中查看结果
注意：这里可能须要你们对npm和webpack有一些简单的了解，不会很是复杂（若是彻底不懂，按照我给出的步骤来作便可，后续本身进行一些知识的补充）

1. 建立一个简单的项目目录结构
   新建一个新的目录：LearnTypeScript，而且建立以下的目录结构
   │ index.html
   ├─build
   │ webpack.config.js
   └─src
   main.ts
   目录和文件夹结构分析:
   index.html是跑在浏览器上的模块文件
   build文件夹中用于存放webpack的配置信息
   src用于存放咱们以后编写的全部TypeScript代码
2. 使用npm管理项目的依赖
   webpack自己须要有不少的依赖，而且以后咱们也须要启动node服务来快速浏览index.html模板以及编译后的JavaScript代码。
   咱们要使用npm来初始化package.json文件：
   npm init -y
   Image06
   初始化package.json
3. 本地依赖TypeScript
   为何须要本地依赖TypeScript：
   由于咱们以后是经过webpack进行编译咱们的TypeScript代码的，并非经过tsc来完成的。（tsc使用的是全局安装的TypeScript依赖）
   那么webpack会在本地去查找TypeScript的依赖，因此咱们是须要本地依赖TypeScript的；
   安装本地TypeScript依赖
   npm install typescript
   Image07
   本地安装TypeScript
4. 初始化tsconfig.json文件
   在进行TypeScript开发时，咱们会针对TypeScript进行相关的配置，而这些配置信息是存放在一个tsconfig.json文件中的
   咱们并不须要手动去建立它，能够经过命令行直接来生成这样的一个文件：
   tsc --init
   Image08
   初始化tsconfig.json
5. 配置tslint来约束代码
   为了让你们按照严格的TypeScript风格学习代码，这里我但愿你们能够加入tslint
   全局安装tslint：
   npm install tslint -g
   在项目中初始化tslint的配置文件：tslint.json
   tslint -i
   Image09
   初始化tslint.json
   2.2. 项目环境的Webpack
   下面咱们开始配置webpack相关的内容
6. 安装webpack相关的依赖
   使用webpack开发和打开，须要依赖webpack、webpack-cli、webpack-dev-server
   npm install webpack webpack-cli webpack-dev-server -D
   Image10
   安装webpack依赖
7. 在package.json中添加启动命令
   为了方便启动webpack，咱们在package.json中添加以下启动命令
   "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "serve": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js"
   },
   Image11
   自定义启动脚本
8. 添加webpack的其余相关依赖
   依赖一：cross-env
   这里咱们用到一个插件 "cross-env" ，这个插件的做用是能够在webpack.config.js中经过 process.env.NODE_ENV 来获取当前是开发仍是生产环境，咱们须要这个插件：
   npm install cross-env -D
   依赖二：ts-loader
   由于咱们须要解析.ts文件，因此须要依赖对应的loader：ts-loader
   npm install ts-loader -D
   依赖三：html-webpack-plugin
   编译后的代码须要对应的html模块做为它的运行环境，因此咱们须要使用html-webpack-plugin来将它插入到对应的模板中：
   npm install html-webpack-plugin -D
9. 配置webpack.config.js文件
   将以下配置到webpack.config.js文件中：
   这里再也不给出详细的说明信息，webpack后面我可能会再开一个专栏来说解

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
entry: "./src/main.ts",
output: {
filename: "build.js"
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
module: {
rules: [
{
test: /.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
}
]
},
devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map",
devServer: {
contentBase: "./dist",
stats: "errors-only",
compress: false,
host: "localhost",
port: 8080
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
})
]
};
2.3. 项目环境下代码测试
下面咱们就能够愉快的在main.ts中编写代码，以后只须要启动服务便可：
Image12
测试代码
在终端中启动服务：
npm run serve
Image13
程序运行
在浏览器中打开：http://localhost:8080/
Image14
查看结果
修改代码，直接能够看到修改后的效果：不须要手动进行任何刷新
Image15
修改代码

以上就是本次的干货分享，以后除了Flutter也会更新其余技术文章，如：TypeScript、React、Node、数据结构与算法等等，也会陆续作一些本身的从业经验分享。好了，本次干货分享到这里就结束啦！感受意犹未尽？想要获取更多干货及免费的学习资源吗？欢迎加微信：19950277730，关注我，带你进阶成为技术大神！