TypeScript偵錯陷阱－中斷點位置不符

目前進行中的網站專案全面改用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也適用～）