Day 2終於要開始接觸TypeScript，在動手打打程式碼之前，要先將開發環境設置成可以使用TypeScript的狀態。

環境設置

首先手邊要有可以支援TypeScript的編輯器，這裡是使用同樣是微軟自家產、本身內建就有支援TypeScript的Visual Studio Code (VSCode)。不過雖然VSCode有支援TypeScript語法，但TypeScript產生的 .ts 檔還是需要將檔案內程式碼轉換成JavaScript語法程式碼才能在瀏覽器或任何可直接執行JavaScript的環境看見執行結果。

基本上TypeSctipt是基於有Node的環境下才能使用並轉換成JavaScript，所以電腦裡要先安裝Node（這裡容我忽略Node的安裝流程）。

安裝好Node之後，可以使用Node相關的套件管理工具下載TypeScript Compiler套件，這篇文章就直接以Node內建的 npm 作為套件管理工具，其他如yarn、pnpm等套件管理工具的下載命令可參照TypeScript官方文件。

若使用npm並想在全域環境下載TypeScript Compiler套件，在Terminal輸入以下指令，其中的 -g 代表的是在 全域環境(global environment) 下載：

npm i -g typescript

如果是只是想在區域環境(local environment) 使用，例如只想在某個專案底下安裝這個套件，可先輸入 npm init 先替專案初始化一個 package.json，這個檔案會顯示目前專案已安裝的套件。

npm init 命令會一直要確認專案的名稱、版本、Liscence非常等資訊，若想一次跳過這些確認資訊的步驟，可以用 npm init --yes 或是等價的縮寫命令 npm init -y 以預設資訊直接產生 package.json （反正package.json檔案內資訊其實也可以等到產生後自行修改）

產生 package.json 後，可輸入：

npm i typescript    //等同於 npm i --save typescript

安裝好後可以在 package.json 的 dependencies 底下看到安裝的套件版本資訊。

提示：
也可以改成輸入 npm i -D typescript (等同於 npm i --save-DEV typescript)，差別在於，以 -D 安裝的套件_不會在專案部署後的環境下使用_，也不會隨著 npm install --production 指令下載，並會顯示於 package.json 的 devDependencies 底下。

不過這裡方便起見也在全域環境安裝TypeScript（npm i -g typescript），這樣可直接在Terminal輸入編譯指令。

安裝完後可新建一個TypeScript檔案 (.ts)，這裡命名成 index.ts 並在檔案內嘗試一些TypeScript的語法，例如先建立string型別的變數 x 並賦值 "10"，然後再重新賦值 number 型別的 20，這時就可以發現TypeScript立刻出現錯誤訊息，告知你不可將number型別值指定給string型別變數。

TypeScript Compiler

接下來先將程式碼改成不會報錯的語法：

然後在Terminal輸入

tsc index

將 index.ts 檔案手動轉換成JavaScript程式碼，而此時會發現多了一個同名的JavaScript檔案 index.js，而這份檔案就能在任何可執行JavaScript的環境使用。
（※ 若已用 npm i –g typescript 的方式安裝，然因使用PowerShell 作為Terminal出現錯誤，可改成輸入 npx tsc index，或參考本文最後面提供的方法解決）

但有個有趣的事實就是，我們對有出現TypeScript錯誤訊息的檔案下 tsc 指令，雖然TypeScript Compiler會回傳錯誤訊息，但實際上還是能成功轉換為 index.js 檔。

雖然原來的程式碼在TypeScript環境有問題，但其實還是符合JavaScript語法，此外這也表示TypeScrpit的設計認為開發者可自行判斷部分程式碼是否要嚴格符合型別規範，不過既然都使用TypeScript了還是就寫出合法的TypeScript程式碼吧！

安裝 ts-node

如果只是想在開發中查看目前執行結果，要像前面這樣一直手動轉換成 .js 檔案再執行也挺麻煩的，這邊可再安裝 ts-node 套件直接執行 .ts 檔案查看結果。

同樣地，這次也是在全域環境下安裝 ts-node

npm i -g ts-node

然後在Terminal 輸入

ts-node index.ts

TypeScript Compiler預設是會轉換成JavaScript ES3語法，若希望轉換成ES5或其他版本，可新增 tsconfig.ts 來設定compile方式，明天就會來談談 tsconfig.ts 有哪些Compiler設定。

編譯?轉譯?

雖然Day 1有提到會詳細解釋 編譯(compile) 與 轉譯(transpile) ，但本文除了編譯器(compiler)以外，儘量避免直接使用編譯或轉譯，原因在於一般會認為 「編譯」 是將高階程式語言編譯成更低階程式語言(如機器語言)的過程，所以許多人認為TypeScript轉換成JavaScript的過程應該是 「轉譯」 ；但也有一部分人認為這兩者存在高低層次抽象轉換或許也可以說是編譯？

此外，微軟的官方文件雖然常用編譯一詞，但也提到TypeScript是轉譯成JavaScript，況且高、低階語言本身也有很多種分類和爭論。

不過整個鐵人賽文章的重點是了解TypeScript的型別系統，後續文章基本上還是按官方文件常用詞 ─ 編譯(compile) 繼續說明，而這邊也就不繼續糾結TypeScript轉換成JavaScript到底是編譯還是轉譯了，對這個問題有興趣的人可以參考以下文章和網友們的觀點：

1. Compiling vs Transpiling
2. Compiling vs Transpiling

後記

以上使用VSCode的範例是先將Terminal切換成Command Prompt (CMD)介面，再輸入指令 。

但如果Terminal是使用windows原生的PowerShell，即便已安裝全域環境的typescript ts-node，還是可能會出現以下畫面這樣的錯誤：

若想用PowerShell，這邊提供幾個有試過可行的解法：

1. 命令改成輸入 npx ts-node index.ts；
2. 參考這篇stackoverflow安裝nodeman套件的解法；
3. 如果是使用VSCode可如下圖安裝PowerShell擴充，改成使用PowerShell Extension 直接執行 ts-node index.ts。
   

參考資料
Learn TypeScript – The Ultimate Beginners Guide
Setting Up Your TypeScript Development Environment
TypeScript tutorial for beginners: setting up TypeScript