首先我們知道更米，運(yùn)行typescript一般是先將ts代碼爬舰，編碼成JavaScript代碼，然后再運(yùn)行JavaScript代碼屁药。

那么粥血，使用vs code直接調(diào)試的流程也是依照這個(gè)。

1. 確保已安裝npm

2. 安裝typescript 編譯環(huán)境酿箭，任選都行

npm install typescript // 安裝到當(dāng)前目錄
npm install typescript --global  // 安裝到全局地址</pre>

或是

npm install -g typescript   // 安裝到全局地址

// C:\Users\xxxxx\AppData\Roaming\npm\tsc

// C:\Users\xxxxx\AppData\Roaming\npm\tsserver

3. 在自己的工作目錄下复亏，運(yùn)行tsc --init

會(huì)生成對(duì)應(yīng)的tsconfig.json文件。

tsconfig.json是對(duì)應(yīng)的編碼成JavaScript時(shí)的一系列的配置缭嫡，

最關(guān)鍵的一點(diǎn)是 “"sourceMap": true, ”

{

   "compilerOptions": {
       "target": "es5",
       "noImplicitAny": false,
       "module": "commonjs",
       "removeComments": true,
       "sourceMap": true,
       "outDir": "Golang/TypeScript/"
    }

    //"include":[
    //     "ts"
    // ],

    //"exclude": [
    //     "js"
    // ]

}

• target：編譯之后生成的JavaScript文件需要遵循的標(biāo)準(zhǔn)缔御。有三個(gè)候選項(xiàng)：es3、es5妇蛀、es2015耕突。

• noImplicitAny：為false時(shí)，如果編譯器無(wú)法根據(jù)變量的使用來(lái)判斷類型時(shí)评架，將用any類型代替眷茁。為true時(shí)，將進(jìn)行強(qiáng)類型檢查纵诞，無(wú)法推斷類型時(shí)上祈，提示錯(cuò)誤。

• module：遵循的JavaScript模塊規(guī)范浙芙。主要的候選項(xiàng)有：commonjs登刺、AMD和es2015。為了后面與node.js保持一致茁裙，我們這里選用commonjs塘砸。

• removeComments：編譯生成的JavaScript文件是否移除注釋。

• sourceMap：編譯時(shí)是否生成對(duì)應(yīng)的source map文件晤锥。這個(gè)文件主要用于前端調(diào)試掉蔬。當(dāng)前端js文件被壓縮引用后廊宪，出錯(cuò)時(shí)可借助同名的source map文件查找源文件中錯(cuò)誤位置。

• outDir：編譯輸出JavaScript文件存放的文件夾女轿。

• include箭启、exclude：編譯時(shí)需要包含/剔除的文件夾

4. 在.vscode目錄下配置ts to js的tasks.json配置

{
// 有關(guān) tasks.json 格式的文檔，請(qǐng)參見(jiàn)
    // https://go.microsoft.com/fwlink/?LinkId=733558
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Test1",
            "type":"shell",
            "command": "tsc",

            //-p 指定目錄蛉迹；-w watch,檢測(cè)文件改變自動(dòng)編譯
            "args": ["-p", ".","-w"],
            "presentation":
            {
                "reveal": "always",
            },
            "problemMatcher": [
                "$tsc"
            ]
        }
    ],
    "cwd": "${workspaceRoot}",
}

4. 配置當(dāng)前工程目錄下的.vscode/launch.json

{
    // 使用 IntelliSense 了解相關(guān)屬性傅寡。 
    // 懸停以查看現(xiàn)有屬性的描述。
    // 欲了解更多信息北救，請(qǐng)?jiān)L問(wèn): https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Current TS File",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/dist/test1.js",
            "args": [
                "${relativeFile}"
            ],
            "cwd": "${workspaceRoot}",// 當(dāng)前工作目錄荐操，current working dir
            "protocol": "inspector"
        }
    ]
}

程序啟動(dòng)入口類 ：
"program": "${workspaceRoot}/dist/test1.js",

5. 運(yùn)行vs code 終端->運(yùn)行生成任務(wù)

image.png

同時(shí)在自己指定的輸出目錄會(huì)生成對(duì)應(yīng)的.js文件和.js.map文件

6. 最后，F(xiàn)5蹭劈，啟動(dòng)程序即可疗绣。

image.png