![TypeScript+Vue.js前端开发从入门到精通](https://wfqqreader-1252317822.image.myqcloud.com/cover/200/52842200/b_52842200.jpg)
2.1.3 使用高级IDE工具
![](https://epubservercos.yuewen.com/CABD60/31397740404941606/epubprivate/OEBPS/Images/Figure-P42_18905.jpg?sign=1738865426-ntzozvbUkYHsrcJDbiuLxXKqVVUKK96Y-0-6e4eaa22a63281e051e557128ed0b359)
将TypeScript源码编译成JavaScript文件后,即可在浏览器或Node.js环境中运行。但是这对开发者来说还是有些不友好,在编写代码后,每次运行都需要手动执行编译指令不仅非常烦琐,而且也不利于开发过程中的断点与调试。因此,在实际编程中,使用一个强大的IDE工具是很有必要的。
Visual Studio Code简称VS Code,是微软于2015年推出的一个轻量但强大的代码编译器,通过插件的扩展,其支持众多编程语言的关键字高亮、代码提示以及编译运行等功能。后面将使用此编辑器来编写TypeScript代码。
在如下地址可以下载新版本的VS Code软件:
https://code.visualstudio.com/
下载完成后,直接进行安装即可。
要进行TypeScript代码的运行与调试,我们需要另外安装一个Node.js软件包,在终端执行如下指令来进行全局安装:
npm install -g ts-node@8.5.4
需要注意,安装的ts-node软件版本要设置为8.5.4,新版本的ts-node可能会对某些函数不支持。
准备工作完成后,可以尝试使用VS Code创建一个名为2.HelloWorld.ts的测试文件,编写代码如下:
【代码片段2-3 源码见附件代码/第2章/2.HelloWorld/2.HelloWorld.ts】
![](https://epubservercos.yuewen.com/CABD60/31397740404941606/epubprivate/OEBPS/Images/Figure-P42_82998.jpg?sign=1738865426-Ed95X4s24V6o64b9WDBeRZUnzBfZ0fKR-0-55847e86dd0c531cafdb0bee7b44d581)
代码本身和上一节几乎没什么变化,下面我们配置VS Code的自定义运行规则,选中VS Code侧边栏上的调试与运行选项,其中会提示我们创建launch.json文件,单击此按钮即可快速创建,如图2-2所示。
注意在生成此文件时要选择Node.js环境。
将生成的launch.json文件修改如下:
![](https://epubservercos.yuewen.com/CABD60/31397740404941606/epubprivate/OEBPS/Images/Figure-P43_83000.jpg?sign=1738865426-1GeJ8D7Icm7LdEzn36KzMvXgSX9nNpVl-0-6248e941099711cb3ebf937189db54ae)
此文件用来配置运行所需要执行的指令,这里我们无须深究,只需要了解即可。配置之后,在VS Code中运行当前项目中的TypeScript文件时会自动调用ts-node软件进行运行,可以尝试对2.HelloWorld.ts文件进行运行,从调试控制台可以看到所输出的Log信息,如图2-3所示。
![](https://epubservercos.yuewen.com/CABD60/31397740404941606/epubprivate/OEBPS/Images/Figure-P42_3032.jpg?sign=1738865426-qD594LSJoqDb6w0F65mEBI67RDzgyjRv-0-32db09c0f3a1687ad09de1f4649d48a7)
图2-2 创建自定义运行与调试规则
![](https://epubservercos.yuewen.com/CABD60/31397740404941606/epubprivate/OEBPS/Images/Figure-P42_3033.jpg?sign=1738865426-0sdTDv0l3eRGPemgsYmeyC37i83wjtnq-0-2ba9367304ee32aba3b15b6ce3e7ff04)
图2-3 直接运行TypeScript源代码
在开发过程中,断点调试也是非常重要的一部分,在VS Code中,鼠标在需要断点的代码行左侧单击,即可添加一个调试断点,以Debug调试的方式进行运行,当程序执行到对应断点行时,即可中断,且可以在调试区看到当前堆栈中的变量数据,如图2-4所示。
![](https://epubservercos.yuewen.com/CABD60/31397740404941606/epubprivate/OEBPS/Images/Figure-P42_3034.jpg?sign=1738865426-sCLm300NSVhJ2DBCRo8xxWc4VQe3PiGU-0-0456f2c2ef464d8a11f00023a320e47b)
图2-4 对程序进行断点调试