【vscode】调试typescript

在命令行中输入tsc -v如果报错的话，那么就说明还没有typescript模块，需要输入以下命令 npm install -g typescript

选择一个文件夹进入命令行并依次输入以下命令

mkdir typescript
cd typescript\
tsc --init

完成之后会在项目的根目录下面生成一个tsconfig.json的文件，配置如下

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

按住ctrl+shift+b，如果是初次配置会弹出提示 enter image description here

点击配置的icon，会在.vscode文件夹下面生成tasks.json，输入以下配置项

{
 // See https://go.microsoft.com/fwlink/?LinkId=733558
 // for thedocumentation about the tasks.json format
 "version": "0.1.0",
 "command": "tsc",
 "isShellCommand": true,
 //-p 指定目录；-w watch,检测文件改变自动编译
 "args": [
     "-p",
     ".",
     "-w"
 ],
 "showOutput": "always",
 "problemMatcher": "$tsc"
}

按下f5，会在.vscode文件夹下面生成launch.json，输入以下配置项

{
 "version": "0.2.0",
 "configurations": [
     {
         "name": "launch",
         "type": "node",
         "request": "launch",
         "program": "${workspaceRoot}/dist/main.js",
         "args": [],
         "cwd": "${workspaceRoot}",
         "protocol": "inspector"
     }
 ]
}

在根目录下面新建dist/main.js和src/main.ts

开启第一个小例子，在main.ts文件下面输入

class Animal {
 greeting:string;
 constructor(message:string) {
     this.greeting = message
 }
 sayHi() {
     console.log(`hi! ${this.greeting}`)
 }
}
class Cat extends Animal{
 constructor(name : string) {
     super(name)
 }
}
let cat = new Cat('tom')
cat.sayHi()

再依次按ctrl+shift+b和f5，会在控制台输出

【vscode】调试typescript

CATALOG