最近要開始將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

