Visual Studio Code 集成TypeScript开发和调试

假设已经安装nodejs。

1、建立项目目录

使用以下命令创建项目的目录：

mkdir ts3
cd ts3
mkdir src
mkdir dist

建立好的目录如下：

ts3
├─dist
└─src

2、初始化 NPM

在项目的根目录下，执行下面的命令：

npm init -y

现在项目结构如下：

ts3
├─dist
└─src
└─package.json

3、安装 TypeScript

在项目的根目录下，执行下面的命令：

npm i -g typescript

4、创建并配置 tsconfig.json

在项目的根目录下，执行下面的命令：

tsc --init

现在项目结构如下：

ts3
├─dist
└─src
└─package.json
└─tsconfig.json

在 tsconfig.json 中取消下面属性项的注释，并修改其属性的值：

这样设置之后，我们在 ./src 中编码 .ts 文件，.ts 文件编译成 .js 后，输出到 ./dist 中。

"outDir": "./dist",
"rootDir": "./src",

5、Hello Typescript

将下面代码复制到./src/index.ts中：

const hello: string = 'hello, Typescript';
console.log(hello);

在项目的根目录下，执行下面的命令：

tsc
node ./dist/index.js

执行结果如下：

PS C:\Users\Alan\TestCode\ts3> tsc
PS C:\Users\Alan\TestCode\ts3> node ./dist/index.js
hello, Typescript

6、调试 TypeScript

如何 F5 开始调试 TypeScript ，并且还具备断点调试功能，答案是，使用 TS-node。

npm install -D ts-node

在当前目录里创建一个 .vscode 目录，并在 这个目录下创建 launch.json文件，内容如下：

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "runtimeArgs": [
        "-r",
        "ts-node/register"
      ],
      "args": [
        "${workspaceFolder}/src/index.ts"
      ]
    }
  ]
}

按 F5 开始愉快的调试吧，F9 是添加断点。

7、使用自动实时编译

VSCode 能够在源代码文件修改变化后自动进行编译，这样有利于错误排除。实现步骤如下：

1）Ctrl + Shift + B 运行构建任务，将显示以下选项界面：

 用鼠标点击下拉框的

tsc: watch - tsconfig.json

VSCode 就会执行一个监视进程，以后编辑的代码保存之后，就会立即自动编译，如果出错也会提示。