TypeScript簡介和環境搭建

TypeScript 簡介

TypeScript 是由微軟公司在 2012 年正式釋出，現在也有 8 年的不斷更新和維護了，TypeScript 的成長速度是非常快的，現在已經變成了前端必會的一門技能。TypeScript 其實就是 JavaScript 的超集，也就是說 TypeScript 是建立在 JavaScript 之上的，最後都會轉變成 JavaScript。這就好比漫威裡的鋼鐵俠，沒穿裝甲之前，他實力一般，雖然聰明有錢，但還是接近人類。但是有了裝甲，他就厲害太多了，甚至可以和神幹一架。

也許你會覺的我這說的太誇張，我剛開始學習時，也是這樣想的，但是用了 2 年左右，特别是大型項目中，真的好用。比如說它的擴充文法、面向對象、靜态類型。如果一個前端項目我可以做主，我會在強烈的要求所有人都使用 TypeScript 的文法進行程式設計。

使用VSCode進行編寫代碼

下載下傳位址：https://code.visualstudio.com/

如果你已經參加了工作，我相信你身邊至少有 80%以上的前端，在使用這款編輯器。

使用 VSCode 講解，還有一個主要的願意就是他們都是微軟出的産品，是以有很好的相容性和支援，VSCode 上有很多專門為 TypeScript 專門作的文法适配，是以在編寫時就會輕松快樂起來。

TypeScript開發環境搭建

如果你想使用 TypeScript 來編寫代碼，你需要先安裝一下它的開發環境，這并不複雜。

1.安裝Node的運作環境

你可以到Node.js官網去下載下傳 Node 進行安裝(https://node.js.org)，建議你下載下傳LTS版本,也就是長期支援版本。安裝的過程我就不示範了，這個過程就和安裝 QQ 一樣，沒有任何難度。

如果你已經安裝了，可以打開指令行工具，然後使用node -v指令檢視安裝的版本，但是一般還有一個指令需要檢測一下，就是npm -v,如果兩個指令都可以輸出版本号，說明你的 Node 安裝已經沒有任何問題了。

2.全局安裝typeScript

你要使用 TypeScript 先要在你的系統中全局安裝一下TypeScript，這裡你可以直接在 VSCode 中進行安裝，安裝指令可以使用 npm 也可以使用 yarn

npm install typescript -g

yarn global add typescript

這兩個你使用那個都是可以的，根據喜好自行選擇，我在視訊中使用的npm進行安裝。

3.建立項目目錄和編譯TS檔案

在你電腦的某個地方建立一個檔案夾，存放typeScript的練習代碼，然後拖進VSCode中，建立一個 Demo1.ts檔案，寫入下面代碼：

function test() {
  let web: string = "Hello World";
  console.log(web);
}

test();

這時候你使用node Demo1.ts是執行不成功的，因為 Node 不能直接運作TypeScript檔案，需要用tsc Demo1.ts轉換一下，轉換完成後typeScript代碼被編譯成了javaScript代碼,新生成一個Demo1.js的檔案，這時候你在指令行輸入node Demo1.js,在終端裡就可以順利的輸出字元了。

4.ts-node 的安裝和使用

但是這樣操作的效率實在是太低了，你可以使用ts-node插件來解決這個問題，有了這個插件，我們就不用再編譯了，而使用ts-node就可以直接看到編寫結果。

使用npm指令來全局安裝，直接在指令行輸入下面的指令：

npm install -g ts-node

安裝完成後，就可以在指令中直接輸入如下指令，來檢視結果了。

ts-node Demo1.ts

TypeScript簡介和環境搭建