VSCode调试Typescript

背景介绍

由于近期要涉及鸿蒙相关的功能，之前没有接触过TS这个语言，所以想要熟悉一下。

但是没想到，在配置环境上，就已经遇到了很多问题。

安装

首先，VS Code是有的，不需要再安装。

安装Node.JS，到官网下载最新的，安装即可：
https://nodejs.org/

安装TS

## npm换源
npm config set registry https://registry.npmmirror.com

## 安装ts
npm i -g typescript

## 查看ts版本，确定是否安装成功
tsc -V

运行问题

提示没有npm或者tsc命令

一般情况下是安装后没有重启VS Code，安装完成后重启后即可。

重启时必须要关闭所有的VS Code窗口，只重启当前测试ts的不可以。

提示tsc : 无法加载文件

在写完测试代码后，尝试运行，但是出现了下面的报错：

tsc : 无法加载文件 C:\Users\Username\AppData\Roaming\npm\tsc.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies 
。
所在位置 行:1 字符: 1
+ tsc .\test.ts
+ ~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

使用管理员模式运行PowerShell，然后执行命令

set-ExecutionPolicy RemoteSigned

完成上面的设置后，我们就可以在命令行中成功将ts翻译为js了：

tsc test.ts

执行成功后，得到文件test.js

然后运行js文件：

node test.js

即可正常运行。

ts-debug

在VSCode中，可以安装插件TypeScript Debugger。
安装这个插件之后，可以不需要将ts文件翻译成js文件，而是可以直接对ts进行调试。

安装后，直接调试，会提示报错：

Error: Cannot find module 'ts-node/register'

这时候，安装下面的插件即可解决：

npm install ts-node --save-dev

Object.defineProperty(exports, __esModule, { value: true })

运行时，我们会发现会多出几行代码，其中有一行就是：

Object.defineProperty(exports, __esModule, { value: true })

这时候，需要在tsconfig.json配置文件中，将"module": "commonjs"注掉

如果目录中没有这个文件，执行下面的命令，就可以自动生成：

tsc -init

调试时自动断点

这时候，执行调试，会出现自动断点到第一行的情况。

这种情况是缺少launch.json造成的。

在左侧切到运行和调试界面，点击设置，自动生产launch.json。

自此，一个简单运行调试ts代码的环境就布置好了。