最近要開始將TypeScript跟React好好的學習並記錄下來，一直以來我都有陸續學習過，不過因為很少使用，基本上學完沒多久就忘了，所以開始做系列文章，並將所學經驗陸續記錄下來，從環境安裝開始
首先從TypeScript的環境安裝開始
內容目錄
VSCode安裝
目前我開發最常使用的編輯器
只要到官網點選下載適用於windowns，mac會自動改為mac適用的版本
安裝node.js
過去的JavaScript只能在瀏覽器上運作，推出了node.js之後，只要安裝好就可以在本機電腦上執行JavaScript
來到官網，右上角可以選擇語言，有支援繁體中文介面
- LTS長期維護版：由官方長期維護，通常持續30個月以上
- Current最新版本：具有現在最新功能，但可能會有變更，較不穩定
※建議選擇LTS長期維護版即可
檢查是否安裝完，打開你的終端機Windows搜尋cmd(命令提示字元)
輸入指令：就會出現版本號，代表安裝成功
node -v
安裝TypeScript
同樣來到官網，點選Try TypeScript Now、Online or via npm
點選右邊的On your computer、via npm，直接把整台電腦的環境做安裝，以後就不用一直裝，很麻煩
接下來會看到這個畫面，我們選擇通過NPM的方式來安裝
※這邊你剛剛安裝node.js就很重要了，如果沒有安裝好，就無法執行指令了
官網這個指令是給個別專案安裝的
npm install typescript --save-dev
我們要改成下面這個，-g的意思是全域，是針對整台電腦的環境設置
npm install typescript -g
接下來打開命令提示字元(打開你的終端機Windows搜尋cmd
)，將指令輸入到電腦
npm install typescript -g
安裝後輸入指令驗證是否安裝成功，呈現當前版本號就沒問題了
tsc -v
建立第一個專案
先建立你的專案資料夾，接下來打開VSCode，並指定路徑到資料夾，新增檔案取名為index.js，這樣檔案就建立完成了，非常簡單
編譯檔案
所有的TypeScript最終都要編譯成為JavaScript，所以我們需要將TypeScript檔案進行編譯，所以我們先打開終端機(終端機>新增終端機)，並在檔案內隨意輸入一行程式碼
並在終端機內輸入tsc index.ts ，前面tsc指令，後面是要編譯的檔案名稱，編譯成功後，就會出現一模一樣檔名的JS檔
tsc index.ts
ts config
要編譯檔案的時候，為了專案開發的方便性，會設定一些編譯的設定，讓整個流程更簡潔順暢，這時候就要建立tsconfig的檔案
我們打開終端機，並且輸入
tsc –init
就可以看到tsconfig.json已經建立好了，同時你也會在終端機得到一個網址，該網站就是介紹tsconfig
輸入輸出位置設定
我們在做檔案分類的時候，就會將相同類型的檔案做整理跟規劃，所以通常ts檔跟js檔都會另外整理成一個資料夾，那現在就是直接在編譯的時候就能達到這樣的效果
找到config檔案中rootDir跟outDir，分別代表著輸入位置，跟輸出位置，輸入位置是TS的檔案夾路徑，輸出位置是JS的檔案夾路徑
這邊分別打上路徑之外，並且將TS檔案放置該路徑資料夾
接下來在終端機輸入編譯指令直接進行編譯
tsc
在TS檔中使用JS檔的設定
我們有時候需要用到已經編寫好的JS程式，但現在已經用TS開發，所以我們要讓JS程式可以在TS中使用
首先找到allowJs並取消註解，然後在TS檔案把JS檔案import進來
在網頁中直接對TS進行除錯
首先我們都是將TS檔案編譯成JS檔案，所以如果檔案執行的話，我們在瀏覽器除錯是無法看到在TS哪裡發生問題的，那我們只要使用config中的sourceMap就能做到這個功能
同樣的先將config的sourceMap註解取消
並且在index.ts中新增console然後編譯，就會得到index.js.map
console.log(str)
接下來是在index.html中新增JS檔案的連結
<script src="./index.js"></script>
打開index.html的網站(使用Live Server)，並打開開發者工具，就可以看到hello world的console連結的是index.ts，點擊後就可以直接在Sources中進行debug
