如何在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并运行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了javascript实现函数柯里化与反柯里化过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
正如标题所言如何对table的td进行相同内容合并，下面为大家详细介绍下使用js是如何做到的，感兴趣的朋友不要错过2013-12-12
世界完全对称日，指的是公历纪年日期中数字左右完全对称的日期，这一天朋友们可以互送祝福同时让大家感叹时间的宝贵。2011-11-11
this指触发事件的对象，接下来为大家分享下javascript中onclick(this)的用法，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-04-04
这篇文章主要介绍了微信小程序中吸底按钮适配iPhone X方案,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-11-11
这篇文章主要介绍了JavaScript中的return布尔值的用法和原理解析,需要的朋友可以参考下2017-08-08
浅析JavaScript定时器setTimeout的时延问题
这篇文章主要为大家详细介绍了JavaScript中定时器setTimeout有最小时延的相关知识,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下2023-11-11
这篇文章主要带领大家理解JavaScript表单的基础知识，对javascript表单脚本进行深入学习，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了JS引用传递与值传递的区别与用法,结合实例形式较为详细的对比分析了javascript引用传递与值传递的原理、区别、使用方法及相关操作注意事项,需要的朋友可以参考下2018-06-06
这篇文章主要为大家详细介绍了微信小程序实现简易table表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-02-02
最新评论