因為要在Visual Studio Code(VS Code)上使用TypeScript(TS)進行開發，
因此今天要教大家做一些前置作業，
讓開發更容易也更有效率。

安裝 延伸模組(Extension)

這裡主要安裝的延伸模組有三個

• Code Runner
• JavaScript (ES6) code snippets
• Live Server

這些都是幫助開發的延伸模組，
其中，因為TS支援轉譯為ES5也支援轉譯為ES6的JS，
因此也更能支援過去的系統使用TS做開發喔。

建立 TypeScript(TS)專案

在Terminal(或命令提示字元)輸入指令，如下

• 建立TS專案
  tsc --init

輸入完便會自動在專案資料夾中建立tsconfig.json檔案，
接著開啟該檔案，將outDir取消註解改為 "outDir": "./js"，
如此一來，就會自動將編譯後的js檔案建置在js資料夾內了，
也較方便管理資料。

另外，裡面的target意味著可選擇轉譯成的JS型態，
如 "target": "es5"，
就是轉為ES5的JS，
若是剛開始開發的專案還是建議有新的用新的吧，
時代在進步呢!

那麼在這我只稍微講解兩個我覺得比較重要的，
另外裡面還有很多可以做客製化調整的，
那我就不再這贅述了，
有興趣的也可以玩看看。

使用 Task Rummer 自動轉譯JavaScript(JS)

若不使用輔助工具，
每次修改程式碼需手動在命令提示字元下指令，
手動將TS轉譯成JS執行，
相當煩瑣且沒效率。

因此可利用Task Rummer工具程式來輔助，
便能自動將TS轉譯成JS。

建立流程如下，

1. View>Command Palette (Ctrl + Shift + P)
2. 輸入 Configure Default Build Task
3. 選取 tsc:build – tsconfig.json
4. 自動建立tasks.json檔案

就可以使用了喔!

轉譯與執行

使用的話兩個步驟，非常重要，
一個就是使用 Task Rummer 將TS轉譯成JS，
另一個就是使用昨天安裝的ts-node輔助工具(可直接在TS上執行結果)搭配Code Runner延伸模組來執行。
步驟如下

1. Run Build Task(Ctrl + Shift + B)

Terminal 輸入
Run Build Task

2. Run Code (Ctrl + Alt + N)

滑鼠在撰寫程式碼的區域按右鍵 選取
Run Code

這兩個步驟在開發時會頻繁的使用到，
強烈建議熟記快捷鍵吧!
對於開發是很有幫助的。

今日結語

那麼希望大家建立環境與前置作業都順利完成，
明天開始就進入程式碼的部分了喔!

加油~