如何在vscode中使用Typescript并运行详解
更新时间：2023年05月30日 09:42:51 作者：suoh's Blog
在VSCode中编写的TypeScript代码不能直接运行,需要先用tsc编译为JavaScript,然后才能运行,下面这篇文章主要给大家介绍了关于如何在vscode中使用Typescript并运行的相关资料,需要的朋友可以参考下
首先呢，我们在学习ts之前，需要先安装ts
1、安装 typescript
npm install -g typescript //检查是否安装 tsc -v
2、生成配置文件，cd进入该文件夹，在控制台输
tsc --init
此时我们就可以看到在ts文件夹下面出现了 一个tsconfig.json的文件
3、编译ts文件
（1）第一种方法可以直接通过命令编译
例如我们创建一个test.ts文件，可以在控制台 输入tsc +文件名 进行编译
tsc test.ts
当然这个操作就比较繁琐了，那就考虑第二种方式了
（2）vscode自动化编译ts文件
由于浏览器是识别不了ts文件的，因此编译的过程就是将ts文件编译为js文件。
如何设置呢？
第一二步如下
第三步，点击终端中的运行任务
看下效果，此时我们新建一个demo.ts，控制台就会自动监视运行
并在js文件夹中自动生成了对应的demo.js文件
此时我们对比一下，就达到了预期的目标。
注意：当然第三步中运行任务 还有一个更简便的方法，可以在该ts目录下直接运行 tsc -w 即可运行该文件夹下所有ts文件
如何在控制台直接运行ts，并可查看打印等输出内容
1、在vscode中安装插件 Code Runner
2、安装ts包
npm i typescript ts-node @types/node@* -g
3、点击文件右上角的运行按钮即可
此时就可以开启ts的学习之路了~
总结
到此这篇关于如何在vscode中使用Typescript并运行的文章就介绍到这了,更多相关vscode使用Typescript并运行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
ES6（ECMAScript 6,也称为ES2015）是JavaScript的一个重要更新版本,引入了许多新的语言特性和改进,使得JavaScript变得更加现代化、易读、易维护和更适合大型应用程序的开发,ES6的主要变化归纳为：语法糖、新机制、更好的语义、更多的内置对象和方法2023-11-11
这篇文章主要给大家介绍了关于unapp微信小程序转发分享及携带参数的2种方式,我们在微信小程序中经常会使用到分享商品海报,或者是重绘微信小程序分享链的图片功能,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了使用Vite创建一个动态网页的前端项目,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2025-06-06
到网上一位别出心裁的高手使用字符串而不是正则表达式实现了Javascript代码高亮显示，自己受益匪浅，于是就构思了CSS代码的高亮显示。2009-11-11
通过url传递参数是我们在开发中经常用到的一种传参方法,下面这篇文章主要给大家介绍了关于前端JS获取URL参数的4种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
处于安全上的考虑，input[type="file"] 的文件选择按钮样式并不能随意修改(不过可以修改input 的透明度)，可能会跟设计师的设计格格不入，这时可以使用透明效果来自定义上传按钮2012-12-12
jquery实现右下角旋转环形菜单特效代码，是固定在页面右下角位置，当用户点击了主菜单按钮后，子菜单项会以环状旋转进入页面，并使用animate.css制作动画效果，有需要的朋友可以参考下2015-08-08
基于Bootstrap里面的Button dropdown打造自定义select
这篇文章主要介绍了基于Bootstrap里面的Button dropdown打造自定义select的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-05-05
本篇文章主要介绍了利用javascript获取鼠标点击元素对象的示例代码。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了js判断浏览器类型及设备（移动页面开发）,需要的朋友可以参考下2015-07-07
最新评论