在vscode中使用Typescript并运行

这篇具有很好参考价值的文章主要介绍了在vscode中使用Typescript并运行。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

首先呢,我们在学习ts之前,需要先安装ts

1、安装 typescript

npm install -g typescript 

//检查是否安装

tsc -v

在vscode中使用Typescript并运行

2、生成配置文件,cd进入该文件夹,在控制台输 

tsc --init

在vscode中使用Typescript并运行

 此时我们就可以看到在ts文件夹下面出现了 一个tsconfig.json的文件

在vscode中使用Typescript并运行

3、编译ts文件

(1)第一种方法可以直接通过命令编译

例如我们创建一个test.ts文件,可以在控制台 输入tsc +文件名 进行编译

tsc test.ts

当然这个操作就比较繁琐了,那就考虑第二种方式了

(2)vscode自动化编译ts文件

由于浏览器是识别不了ts文件的,因此编译的过程就是将ts文件编译为js文件

如何设置呢?

第一二步如下
在vscode中使用Typescript并运行

第三步,点击终端中的运行任务 

 在vscode中使用Typescript并运行

在vscode中使用Typescript并运行

 在vscode中使用Typescript并运行

 看下效果,此时我们新建一个demo.ts,控制台就会自动监视运行

在vscode中使用Typescript并运行

 并在js文件夹中自动生成了对应的demo.js文件

在vscode中使用Typescript并运行

 此时我们对比一下,就达到了预期的目标。在vscode中使用Typescript并运行

注意:当然第三步中运行任务 还有一个更简便的方法,可以在该ts目录下直接运行 tsc -w 即可运行该文件夹下所有ts文件

在vscode中使用Typescript并运行

如何在控制台直接运行ts,并可查看打印等输出内容

1、在vscode中安装插件 Code Runner

在vscode中使用Typescript并运行

2、安装ts包

npm  i typescript ts-node @types/node@* -g

在vscode中使用Typescript并运行

 3、点击文件右上角的运行按钮即可

在vscode中使用Typescript并运行

此时就可以开启ts的学习之路了~文章来源地址https://www.toymoban.com/news/detail-435936.html

到了这里,关于在vscode中使用Typescript并运行的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【01】基础知识:typescript安装及使用,开发工具vscode配置

    typeScript 是由微软开发的一款开源的编程语言。 typeScript 是 javascript 的超级,遵循最新的 es6、es5规范。 typeScript 扩展了 javaScript 的语法。 typeScript 更像后端 java、C# 这样的面向对象语言,可以让 js 开发大型企业项目。 全局安装:$ npm install -g typescript 查看 typescript 版本:$ ts

    2024年02月13日
    浏览(51)
  • TeamView: 为了进一步增强安全性,在发起连接之前,我们希望您先验证您的账户

    TeamViewPC端远程连接另外一台电脑 弹出窗口:为了进一步增强安全性,在发起连接之前,我们希望您先验证您的账户 电脑浏览器自动跳转到手机号验证页面,输入正确的手机号后,点击验证却一直提示 手机号无效、手机号未知等异常。 复制验证链接到手机 https://login.teamviewer.

    2024年02月14日
    浏览(63)
  • 【免费】win7 所有.net framework框架集合,免费下载,若要运行此应用程序,您必须首先安装net framework如何解决

    运行软件缺失框架: 那天我看见网上下载一个框架都要收费还要100大洋,现在真的是干啥都要钱,索性就整理了一个全库供大家下载,做点好事 .net 框架所有的 .net官网下载地址, 所有框架向下兼容,安装报错,就往上一个新版本下载装 微软官网:.net framework 3.5- 4.8框架 下

    2024年02月05日
    浏览(112)
  • 【解决方案】使用WebStorm运行TypeScript文件(基于ts-node)

    本文章内 所有WS代表WebStorm; 所有TS代表TypeScript。 首先呢,我也算是TS的初学者。相信作为过来人都清楚,新手刚刚上手TS的时候,配置环境是多么痛苦的一件事情。并且,我就很好奇,为什么网上教程、参考文档、甚至专业书籍,铺天盖地都是使用的是VScode编写的。(难道

    2024年02月09日
    浏览(48)
  • pycharm如何查看之前的运行结果

    谁能懂用pycharm跑了一夜的代码,早上起来,电脑突然关机了!!!!!!!!!!气死我了!!!! 不过正是因为遇到的一个又一个的问题,才能探索未知的东西,就比如昨天某位小李同学,让我做PPT的放大镜效果,嘿,这学习机会不就来了吗,贵宾们是否也想知道放大镜

    2024年02月02日
    浏览(38)
  • Visual Studio容器工具要求在构建,调试或运行容器化项目之前运行Docker

    出现此提示,是因为电脑未安装Docker所致,接下来就教大家如何安装Docker。 第一步:下载 地址:Install Docker Desktop on Windows | Docker Documentation 第二步:安装         1、双击 Docker Desktop Installer.exe 运行安装程序。         2、出现提示时,确保根据您选择的后端选择或不

    2023年04月17日
    浏览(45)
  • 使用逻辑回归LogisticRegression来对我们自己的数据excel或者csv数据进行分类--------python程序代码,可直接运行

    逻辑回归是一种用于二分类问题的机器学习算法。它基于对输入特征进行加权求和,然后将这个求和结果传入一个sigmoid函数中来预测输出标签的概率。在训练过程中,我们需要使用极大似然估计来更新模型参数,以便使模型的预测结果最符合实际情况。 逻辑回归是一种分类

    2024年02月10日
    浏览(41)
  • linux安装vscode & vscode使用 & 创建项目并运行

    https://code.visualstudio.com/ 下载.deb文件 假如文件被下载到了 /opt目录下 进入Opt目录,右键从当前目录打开终端。 输入下面的安装命令。 安装成功。 使用c++,必须安装 C/C++插件,CMake插件,CMake Tools插件 打开 visual studio code,选择c++插件 点击install。 CMake和CMakeTools也是如此。 终端

    2024年02月04日
    浏览(40)
  • 使用vscode运行Vue项目

    目标 使用vscode运行别人工程里的vue项目 工作 安装node 检查安装情况:打开cmd,依次输入node -v 和 npm -v,查看到版本号,则安装成功。 用vscode打开vue项目 使用快捷键 Ctrl+shift+Y 呼出控制台,在控制台点击 终端 输入 npm install 或者 npm i 添加包依赖。 运行结果如下所示: 最后执

    2024年02月12日
    浏览(35)
  • 使用vscode编写、运行Python程序

    vscode是一个代码编辑器,支持win10、Ubuntu等多种主流操作系统。vscode中有很多实用的拓展工具,借助这些工具,可以很方便地完成代码编写、调试、运行、版本管理。 vscode的下载地址为:https://code.visualstudio.com/Download,界面如下: 在下载界面中, 根据你的操作系统,选择不同

    2024年02月04日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包