Take you step by step to build TypeScript environment

Continue to update today, this article we are talking about setting up the environment, mainly to share some of the learning resources environment to build and install steps to address some of the problems that may occur during installation.
Here let us enter the first step in learning, build TypeScript environment:
A environment to build
1.1 TypeScript installation environment.
'Ve configured environment, you can download: https://github.com/coderwhy/HYLearnTS.git
on a chapter we said, TypeScript will eventually be compiled into JavaScript code:
image01
the typescript running processes
so that we necessarily need the corresponding compiler environment:
 first, TypeScript environment installation dependent Node, so you need to ensure that there Node and NPM environment on a computer ;
 secondly, can be installed by NPM typeScript, can then be compiled by tsc typescript; code
first to the overall installation:

Installation Commands

npm install typescript -g

View version

tsc --version
Note: Here I used the terminal git bash, you can directly use the windows command line tool
Image02
installation TypeScript
1.2 VSCode environmental structures.
learn or use TypeScript there are many editors can choose for us now more commonly used front-end development are two:
WebStorm: JetBrains company's products, usage and PHPStorm, PyCharm, IDEA uses basically the same;
VSCode: in the Microsoft's products, could be said to have become the most popular front-end tool, and is itself TypeScript written;
Flutter in the previous article, I have been compared VSCode and Android Studio strengths and weaknesses, and in fact VSCode and WebStorm contrast the advantages and disadvantages are similar, there is no detailed comparison.
And after learning and use TypeScript, I would prefer VSCode, so here we introduce VSCode of environmental structures.

1. Download and install VSCode
    Download: https://code.visualstudio.com/
   after  download can be installed directly
2. Install the corresponding plug
   VSCode another powerful place that has a lot of useful plug-;
    I am personally against the front end of the plug-in installed are: open in browser, Vetur, TSLint , Bracket Pair Colorizer etc;
    Here I Screenshot will not be given because I have for Python, Java, Flutter installed a lot of plug-ins can interfere with everyone;
   . 1.3 tsc simple code test
   after the above steps are completed, we can write our TypeScript code VSCode, and by Some methods for testing.
3. Open VSCode, and two new documents: index.ts
   index.ts code as follows:
   // define a variable
   the let Message: String = "ABC";
   Message = 123;

// define a function
function SUM (num1: Number, num2: Number): Number {
return num1 num2 +;
}

sum ( "abc", "cba ");
we will find that there are two places will be error:
Error 1: You can not type "123" is assigned to type "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 Project Environment Code under test
Here we can have fun in main.ts write code, after only need to start the service:
Image12
test code
to start the service in the terminal:
npm RUN serve
Image13
running
open in the browser: HTTP: // localhost: 8080 /
Image14
see the results
modify the code, you can directly see the effect of changes: no need to manually refresh any
Image15
modify the code

Those are the times of dry goods share, after addition Flutter also updates other technical articles, such as: TypeScript, React, Node, data structures and algorithms, etc., is also planning to do some of his own business experience to share.
Well, this dry goods share here came to an end! Feel something more to say? Want to get more dry and free resources for learning it? Please add micro letter: 19950277730, my concern with your advanced technology to become the great God!