目前進行中的網站專案全面改用TypeScript,有顆地雷卻一忘再忘,踩了又踩,痛定思痛怒寫筆記,誓言戰勝末稍血液循環問題

TypeScript需編譯轉成JavaScript,不過Visual Studio預設TypeScript一存檔就自動編譯,因此過去邊測邊改的習慣仍能照舊。在瀏覽器用F12開發工具找出問題,回Visual Studio修改TypeScript存檔,回到瀏覽器重新載入網頁就能重測修改結果,不需重新編譯整個專案,開發節奏較快,卻也因此在JavaScript偵錯期間偶爾發生靈異現象。

以下是一個無敵簡單又沒營養的範例網頁,輸入兩個數字計算相減結果,JavaScript邏輯寫在test.ts,blah.calcSub():

接著請看示範。TypeScript編譯時會一併產生test.js.map檔,並會在test.js下行以sourceMappingURL標示map檔,瀏覽器就會用原始TypeScript檔(test.ts)取代test.js進行偵錯。我在test.ts的calcSub()函式設好中斷點,按下「=」計算鈕,理論上執行焦點應該停在calcSub(),但並沒有,它莫名其妙地停在calcAdd(),花惹發?

其實,一切是自己造孽!原始碼位置錯亂源於test.js、test.js.map、test.ts的不一致。直接下載test.js可以發現示範過程test.ts裡有一個class foo在test.js並沒有出現,那是TypeScript後來加的新程式,但test.js沒有。通常這是TypeScript語法出錯無法編譯的後果,test.js與test.js.map仍是修改前版本,test.ts是修改後的版本,舊版test.js指向新版test.ts,偵錯時便會出現程式行數錯亂。

在Visual Studio開啟test.ts,右側捲軸的小紅點提供了鐵證!what()函式的大括號後方多了分號,TypeScript儲存了卻無法編譯,因為採用「存檔-重新整理-測試」快速開發模式,一不小心遺漏TypeScript語法有誤的警訊,接下來就是偵錯階段鬼打牆,不斷碎唸為什麼程式行數亂跳一通…

跌倒數次後,現在我只要在偵錯時發現程式碼行數錯亂,優先檢查是否有TypeScript編譯錯誤準沒錯!(PS:此一現象在Scss也適用~)


Comments

Be the first to post a comment

Post a comment


31 - 0 =