react教學系列

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

By dong

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。