帶你一步一步搭建TypeScript環境

 

 

 

今天繼續來更新，本篇文章咱們講環境搭建，主要分享一些環境搭建的學習資源及安裝步驟，解決一些安裝時可能會出現的問題。
下面就讓咱們一塊兒進入學習第一步，
搭建TypeScript環境：
一. 環境搭建
1.1. TypeScript環境安裝已經配置好的環境，你們能夠直接下載：https://github.com/coderwhy/HYLearnTS.git在上一個章節中咱們說過，TypeScript最終會被編譯成JavaScript代碼：
TypeScript運行流程那麼咱們必然須要對應的編譯環境：·首先，TypeScript的環境安裝依賴Node，因此須要先保證電腦上有Node和NPM環境；·其次，能夠經過NPM來安裝TypeScript，以後就能夠經過 tsc 來編譯TypeScript的代碼；首先來進行全局安裝：# 安裝命令npm install typescript -g # 查看版本tsc --version注意：這裏我使用了git

bash的終端，你能夠直接使用windows的命令行工具

安裝TypeScript1.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.tsindex.ts代碼以下：// 定義一個變量let message: string = 「abc」;message = 123; // 定義一個函數function sum(num1: number, num2: number): number { return num1 + num2;} sum(「abc」, 「cba」);咱們會發現有兩個地方都會報錯：錯誤一：不能將類型「123」分配給類型「string」
4. 錯誤一錯誤二：類型「「abc」」的參數不能賦給類型「number」的參數
5. 錯誤二上面兩個錯誤都是由於咱們的代碼已經增長了類型約束，不能隨便賦值其餘類型給咱們的變量。將代碼修改正確以下：// 定義一個變量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查看結果咱們會發現，生成了一個index.js文件，而且其中的代碼就是普通的JavaScript代碼。
6. 3. JavaScript代碼的測試若是咱們但願測試這段JavaScript代碼就很是簡單了，兩種方式均可以：·方式一：使用node直接執行JavaScript代碼；·方式二：建立一個html文件，在其中引入index.js文件，而且在瀏覽器中進行測試；這裏再也不給出具體的步驟，你們能夠自行去測試問題：每次都這樣測試會不會太麻煩了呢？若是每次咱們寫完一個TypeScript代碼都須要像上面的步驟同樣，一點點去完成測試就會過於麻煩，咱們能夠怎麼作呢？·直接配置webpack，讓webpack對咱們編寫的代碼進行一個編譯，而且自動引入編譯後的js文件；·並且webpack能夠在代碼修改後從新幫助咱們進行編譯，而且自動刷新瀏覽器，不須要手動操做；二. 項目環境若是實在不會搭建，能夠從個人GitHub上直接下載我已經搭建好的模板：記得點個starGitHub地址：
7. 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初始化package.json3. 本地依賴TypeScript爲何須要本地依賴TypeScript：·由於咱們以後是經過webpack進行編譯咱們的TypeScript代碼的，並非經過tsc來完成的。（tsc使用的是全局安裝的TypeScript依賴）·那麼webpack會在本地去查找TypeScript的依賴，因此咱們是須要本地依賴TypeScript的；安裝本地TypeScript依賴npm install typescript本地安裝TypeScript4. 初始化tsconfig.json文件在進行TypeScript開發時，咱們會針對TypeScript進行相關的配置，而這些配置信息是存放在一個tsconfig.json文件中的咱們並不須要手動去建立它，能夠經過命令行直接來生成這樣的一個文件：tsc --init初始化tsconfig.json5. 配置tslint來約束代碼爲了讓你們按照嚴格的TypeScript風格學習代碼，這裏我但願你們能夠加入tslint全局安裝tslint：npm install tslint -g在項目中初始化tslint的配置文件：tslint.jsontslint -i初始化tslint.json2.2. 項目環境的Webpack下面咱們開始配置webpack相關的內容1. 安裝webpack相關的依賴使用webpack開發和打開，須要依賴webpack、webpack-cli、webpack-dev-servernpm install webpack webpack-cli webpack-dev-server -D安裝webpack依賴2. 在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」},自定義啓動腳本3. 添加webpack的其餘相關依賴依賴一：cross-env這裏咱們用到一個插件 「cross-env」 ，這個插件的做用是能夠在webpack.config.js中經過 process.env.NODE_ENV 來獲取當前是開發仍是生產環境，咱們須要這個插件：npm install cross-env -D依賴二：ts-loader由於咱們須要解析.ts文件，因此須要依賴對應的loader：ts-loadernpm install ts-loader -D依賴三：html-webpack-plugin編譯後的代碼須要對應的html模塊做爲它的運行環境，因此咱們須要使用html-webpack-plugin來將它插入到對應的模板中：npm install html-webpack-plugin -D4. 配置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中編寫代碼，以後只須要啓動服務便可：測試代碼在終端中啓動服務：npm run serve程序運行在瀏覽器中打開：http://localhost:8080/查看結果修改代碼，直接能夠看到修改後的效果：不須要手動進行任何刷新以上就是本次的乾貨分享，以後除了Flutter也會更新其餘技術文章，如：TypeScript、React、Node、數據結構與算法等等，也會陸續作一些本身的從業經驗分享。好了，本次乾貨分享到這裏就結束啦！感受意猶未盡？想要獲取更多幹貨及免費的學習資源嗎？歡迎加微信：19950277730，關注我，帶你進階成爲技術大神！