今日の更新に進み、私たちは環境の設定について話しているこの記事では、主にビルドへの学習資源環境の一部を共有し、インストール中に発生する可能性がある問題の一部に対処するための手順をインストールします。
ここで私たちは、ビルド活字体の学習環境での最初のステップを入力してみましょう：
A環境を構築する
。1.1活字体の設置環境を
「構成された環境をVeは、あなたがダウンロードすることができます。https://github.com/coderwhy/HYLearnTS.git
に章では、私たちが活字体が最終的にJavaScriptコードにコンパイルされます、言った：
image01
typescriptですが、プロセスを実行している
：私たちは、必ずしも対応するコンパイラ環境が必要であることを
、あなたはコンピュータ上でそれがノードとNPM環境を確保する必要があるまず、活字体環境のインストール依存ノード、ので、 ;
第二に、NPM活字体でインストールすることができ、その後、TSC typescriptですによってコンパイルすることができ、コード
最初の全体的なインストールに：
インストールコマンド
NPMインストールtypescriptです-g
ビューバージョン
TSC --version
注：ここで私は、端末のgit bashのを使用し、あなたが直接窓がラインツールコマンドを使用することができます
Image02
インストール活字体
1.2 VSCode環境の構造を。
多くの編集者が今より一般的に使用されるフロントエンド開発私たちのために選択することができますがあり活字体を習得したり、使用します2は、以下のとおりです。
WebStorm：JetBrainsの同社の製品、使用状況やPHPStorm、PyCharm、IDEAが使用する基本的に同じ;
VSCode：マイクロソフト社の製品で、最も人気のあるフロントエンドツールになってきたと言うことができ、それ自体では、書かれた活字体。
前の記事でフラッターは、私がVSCodeとAndroid Studioの長所と短所を比較し、実際のVSCode中とWebStorm長所と短所は何の詳細な比較はありません、似ている対比されています。
そして、活字体を学習し、使用後に、私はここで、我々は、環境構造のVSCodeを紹介し、VSCodeを好むだろう。
- VSCodeダウンロードしてインストールし
ます。ダウンロードhttps://code.visualstudio.com/を
ダウンロードが直接インストールすることができます後 - 対応するプラグインがインストール
便利なプラグインをたくさん持っている別の強力な場所をVSCode;
私は、プラグインのインストールのフロントエンドに対して個人的に思いますされていますTSLint、Vetur、ブラウザで開いてブラケットペアカラー表示機能、 など;
ここで私は、私は、Python、Javaのために持っているので、スクリーンショットが与えられません、フラッターは誰に干渉することができますプラグインの多くをインストールし、
1.3 TSC簡単なコードのテストを
上記の手順が完了した後、私たちは私たちの活字体のコードVSCodeを書き、によってできますテストのためのいくつかの方法。 - オープンVSCode、2つの新しいドキュメント：index.ts
index.tsコードは次のように：
//が変数に定義
LETメッセージ：文字列=「ABC」;
メッセージ= 123;
//関数の定義
関数をSUM（NUM1：番号、NUM2：数）：ナンバー{
戻りNUM1 NUM2 +;
}
合計（「ABC」、「CBA 」）;
我々は2つの場所があることがわかりますが、エラーになります：
エラー1：あなたが『123』と入力することはできませんが、 『文字列』タイプに割り当てられ
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地址：
2.1. 项目环境的基础配置
为了我们之后的学习和使用方便，我们来配置一个webpack的环境：
在环境中我们编写对应的TypeScript代码，让webpack自动帮助我们编译，并且在浏览器中查看结果
注意：这里可能需要大家对npm和webpack有一些简单的了解，不会非常复杂（如果完全不懂，按照我给出的步骤来做即可，后续自己进行一些知识的补充）
- 创建一个简单的项目目录结构
新建一个新的目录：LearnTypeScript，并且创建如下的目录结构
│ index.html
├─build
│ webpack.config.js
└─src
main.ts
目录和文件夹结构分析:
index.html是跑在浏览器上的模块文件
build文件夹中用于存放webpack的配置信息
src用于存放我们之后编写的所有TypeScript代码 - 使用npm管理项目的依赖
webpack本身需要有很多的依赖，并且之后我们也需要启动node服务来快速浏览index.html模板以及编译后的JavaScript代码。
我们要使用npm来初始化package.json文件：
npm init -y
Image06
初始化package.json - 本地依赖TypeScript
为什么需要本地依赖TypeScript：
因为我们之后是通过webpack进行编译我们的TypeScript代码的，并不是通过tsc来完成的。（tsc使用的是全局安装的TypeScript依赖）
那么webpack会在本地去查找TypeScript的依赖，所以我们是需要本地依赖TypeScript的；
安装本地TypeScript依赖
npm install typescript
Image07
本地安装TypeScript - 初始化tsconfig.json文件
在进行TypeScript开发时，我们会针对TypeScript进行相关的配置，而这些配置信息是存放在一个tsconfig.json文件中的
我们并不需要手动去创建它，可以通过命令行直接来生成这样的一个文件：
tsc --init
Image08
初始化tsconfig.json - 配置tslint来约束代码
为了让大家按照严格的TypeScript风格学习代码，这里我希望大家可以加入tslint
全局安装tslint：
npm install tslint -g
在项目中初始化tslint的配置文件：tslint.json
tslint -i
Image09
初始化tslint.json
2.2. 项目环境的Webpack
下面我们开始配置webpack相关的内容 - 安装webpack相关的依赖
使用webpack开发和打开，需要依赖webpack、webpack-cli、webpack-dev-server
npm install webpack webpack-cli webpack-dev-server -D
Image10
安装webpack依赖 - 在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
自定义启动脚本 - 添加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 - 配置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はサーブ
Image13を
実行している
ブラウザで開いています：HTTP：// localhostを：8080 /
Image14
結果が見
手動でリフレッシュする必要はありません：コードを変更し、あなたは直接変更の効果を確認でき
Image15は、
コードを変更します
さらにフラッターは、他の技術のような記事、更新した後、これらは、乾燥品のシェアの時間です：活字体、反応して、ノード、データ構造とアルゴリズム、などを、また共有に自分自身のビジネスの経験の一部を行うことを計画しています。
さて、この乾燥品は、最後に来た、ここで共有します！言うことをより多くの何かを感じますか？それを学ぶために、より乾燥した自由なリソースを取得したいですか？マイクロ文字を追加してください：19950277730、あなたの高度な技術と私の懸念を偉大な神になるために！