TypeScript筆記 2--代碼調試

代碼調試（debug）是平常開發中必不可少的手段之一，沒法進行代碼調試會讓咱們痛苦不已，本文主要介紹如何調試TypeScript代碼

不少剛接觸TypeScript的人或許有疑問，咱們編寫的TypeScript編譯成JavaScript，在html中引用的是編譯後的JavaScript，這樣代碼報錯的地方就和實際開發ts對應不上，這怎麼調試？

咱們能夠採用Source Map

Source Map是什麼

現在前端技術飛速發展，一不留神就落後了。JS變得愈來愈複雜（壓縮，文件合併，其它語言編譯成Js），致使實際運行的代碼和開發態的代碼不一致，調試困難，因而Source Map出現了。

簡單地說Source Map就是一個文件，裏面是轉換代碼的代碼位置和轉換前的代碼位置的映射信息，這樣當前程序報錯時，咱們能夠找到開發態代碼位置。

如何生成Source Map

TypeScript在編譯時能夠同附帶參數生成,命令以下：

tsc --sourcemap Person.ts

執行後，會在同目錄下生成名爲Person.js.map文件，這就是Source Map文件,內容以下：

{
    "version": 3,
    "file": "Person.js",
    "sourceRoot": "",
    "sources": [
        "Person.ts"
    ],
    "names": [],
    "mappings": "AAAA;IAGI,gBAAY,IAAW,EAAE,GAAU;QAC/B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;IACnB,CAAC;IAED,oBAAG,GAAH;QACI,MAAM,CAAI,IAAI,CAAC,IAAI,YAAO,IAAI,CAAC,GAAG,eAAY,CAAC;IACnD,CAAC;IACL,aAAC;AAAD,CAAC,AAXD,IAWC;AAED,IAAI,IAAI,GAAG,IAAI,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAElC,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC"
}

該文件是一個json格式，分別記錄編譯前文件和編譯後文件信息，至於文件內容到底是何含義，咱們就不深究了，有興趣的能夠閱讀阮一峯老師的文章JavaScript Source Map 詳解

Source Map如何使用

目前，暫時只有Chrome瀏覽器支持這個功能。在Developer Tools的Setting設置中，確認選中"Enable source maps"。

同時須要在編譯的js代碼加上之後信息(編譯時已自動加上了)

//# sourceMappingURL=Person.js.map

注意Person.js.map是一個路徑，Source Map文件能夠是本地文件，也能夠是網絡文件

這樣能夠了像調試js代碼同樣調試TypesSript了

參考文章

JavaScript Source Map 詳解-阮一峯