在vscode中使用Typescript并运行

news2024/11/16 7:53:10

首先呢,我们在学习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,并可查看打印等输出内容

1、在vscode中安装插件 Code Runner

2、安装ts包

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

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

此时就可以开启ts的学习之路了~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/350595.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

搞清品牌策划第一性原理

【班门弄斧】一个科技男的妄想~~ ………搞懂品牌营销的深层逻辑 马斯克说,搞清第一性原理 国内有学科理论支撑的品牌营销大咖 趣讲大白话:我读书多,别骗我 *********** 【国内品牌营销大咖们的理论支撑】 1、王志纲 -中国智慧(时…

C++——类和对象3

目录 1. 运算符重载 1.1 "" 的重载 1.2 前置 "" 和后置 "" 重载 1.3 流插入 "<<" 和流提取 ">>" 重载 1.4 运算符重载注意事项 2. const成员和static成员 2.1 const成员 2.2 static成员 3. 友元 …

C++递推基础知识

文章目录一、递推的概念二、递推和递归的区别三、递推的实例1、最基础的&#xff1a;斐波那契数列2、变形版斐波那契数列3、较复杂的递推式求解&#xff1a;昆虫繁殖4、经典逆推问题&#xff1a;题目数量一、递推的概念 1、什么是递推算法&#xff1f; 递推算法&#xff1a;是…

剑指 Offer 60. n个骰子的点数

题目 把n个骰子扔在地上&#xff0c;所有骰子朝上一面的点数之和为s。输入n&#xff0c;打印出s的所有可能的值出现的概率。 你需要用一个浮点数数组返回答案&#xff0c;其中第 i 个元素代表这 n 个骰子所能掷出的点数集合中第 i 小的那个的概率。 思路 动态规划&#xff1…

九龙证券|“股神”也做短线?巴菲特减仓逾八成台积电

美东时间2月14日盘后&#xff0c;“股神”巴菲特旗下公司伯克希尔哈撒韦&#xff08;下称“伯克希尔”&#xff09;发表的13F陈述引发商场热议。13F陈述被誉为“股市风向标”&#xff0c;出资者可藉此得以一窥华尔街大佬的最新出资思路。 根据美国证券交易委员会&#xff08;SE…

Vulnhub 渗透练习(三)—— Bulldog

环境搭建 下载链接 在 virtuallBox 中打开靶机。 virtuallBox 网络连接方式设置为仅主机。 vmware 设置桥接模式的网卡为 VirtualBox Host-Only Ethernet Adapter。 kail 网络适配设置为 NAT 和 桥接。 来自&#xff1a;https://blog.csdn.net/LYJ20010728/article/details/1…

JavaEE|文件操作·上

文章目录一、认识文件文件的概念文件的管理相关概念相对路径写法♋文件的分类Java中文件的操作二、File类的使用构造方法获得文件元信息判断的相关方法删除的方法与目录有关的方法修改名字三、流对象的使用什么是流文件内容操作涉及内容字节流对象InputStreamOutputStream字符流…

Bug bounty学习笔记20230213-0216(searching for Target)

www.bugcrowd.com Bug bounty program website 寻找email address Hunter.io Phonebook.cz www.voilanorbert.com – clearbit connect 在chrome里使用 Tools.verifyemailaddress.io Email-checker.net/validate 确定邮箱地址是不是真的 Dehashed.com Search for personal …

ChatGPT 最好的替代品

前两天我们邀请了微软工程师为我们揭秘 ChatGPT&#xff0c;直播期间有个读者问到&#xff1a;有了 ChatGPT&#xff0c;BERT 未来还有发展前途吗&#xff1f;我想起来最近读过的一篇博客“最好的 ChatGPT 替代品”。 不过聊到这俩模型&#xff0c;就不得不提到 Transformer。 …

夭寿啦!我的网站被攻击了了735200次还没崩

记得有一个看到鱼皮的网站被攻击&#xff0c;那时候我只是一个小小号&#xff0c;还在调侃&#xff0c;没想到我居然也有那么一天&#xff01; 突袭 一个风和日丽中午&#xff0c;我正在和同事吃饭&#xff0c;一个内存oom&#xff0c;我的小破站崩溃了。 虽然天天被攻击吧&a…

Linux - iostat 命令详解(监视磁盘 I/O)

iostat 是最常用的磁盘 I/O 性能观测工具&#xff0c;它提供了每个磁盘的使用率、IOPS、吞吐量等各种常见的性能指标&#xff0c;这些指标实际上来自 /proc/diskstats。 使用方式说明 [rootizwz98ahlvpkv3l7551ud2z ~]# iostat -help 用法:iostat [ 选项 ] [ <时间间隔>…

QML Gradient(渐变)

在Rectangle中简单的介绍了渐变&#xff0c;但只介绍了一种&#xff0c;下面还会介绍几种。 注意&#xff1a;渐变&#xff08;Gradient&#xff09;的优先级大于普通颜色&#xff08;color&#xff09; 线性渐变&#xff1a; 默认&#xff08;从上到下&#xff09;垂直渐变&…

C++【map和set的基本使用】

文章目录1、关联式容器2、键值对3、树形结构的关联式容器3-1、set3-1-1、set的使用3-1-3、set的使用样例3-2、map3-2-1、map的使用3-2-2、map的使用样例3-3、multiset3-4、multimap4、总结1、关联式容器 在初阶阶段&#xff0c;我们已经接触过STL中的部分容器&#xff0c;比如…

使用IPV6+DDNS连接内网主机

0、前言 IPV6已经普及多年&#xff0c;但是作为互联网用户好像并没有在实用性上有更多感受&#xff0c;或者说IPV6并没有让普通用户感觉到改变。我作为网络从业者其实也没有过多关注。在工作中普遍遇到的还是基于IPV4的网络&#xff0c;比如各个行业的网络、单位的内网区域和互…

C语言赋值(关系)运算符和逗号运算符

一.赋值&#xff08;关系&#xff09;运算符 1.关系运算符 高优先级组 < 左边值小于右边值,则返回1。否则返回0 < 左边值小于等于右边值,则返回1。否则返回0 > 左边值大于右边值,则返回1。否则返回0 > 左边值大于等于右边值,则返回1。否则返回0 低优先级组…

React组件的用法和理解

React组件 函数式组件 <div id"test"></div><script type"text/babel">//1.创建函数式组件(必须大写&#xff0c;函数必须有返回值)function MyComponent(){console.log(this); //此处的this是undefined&#xff0c;因为babel编译后开…

自己实现 ChatGpt ?先学习 Pytorch 吧

最近 ChatGpt 的爆火&#xff0c;让人非常震撼&#xff0c;无论是知识问答、对话还是代码撰写&#xff0c;都非常符合人们的预期&#xff0c;让人不得不感慨机器学习的强大。不信&#xff1f;看下面&#xff1a; 图1 语言分析处理 图2 知识问答 图3 写故事 图4 写代码 体…

详解ZabbixBSM是啥?业务服务监控达到全新高度

感谢本文译者赵广生 ! 欢迎更多资深用户&#xff0c;结合自己使用经验翻译原厂博文&#xff01; 赵广生 毕业于北京外国语大学&#xff08;信息管理与信息技术&#xff09;&#xff1b; 毕业后先后在多个公司从事信息化运维管理工作&#xff1b; 主要涉及虚拟化领域vmwa…

pytorch离线安装

windows下离线安装pytorch&#xff0c;很多内网机&#xff0c;无法连接外网&#xff0c;只能下载whl文件进行离线安装下载pytorch&#xff0c;地址https://download.pytorch.org/whl/torch_stable.html我是windows&#xff0c;Python37&#xff0c;没有gpu&#xff0c;所以选择…

如何利用知识库加强内部管理?

许多公司都知道需要有一个面向客户的知识库&#xff0c;以加强客户服务&#xff0c;提供更好的客户体验。 但是很多企业没有意识到的是&#xff0c;拥有一个内部知识库软件对于员工改善沟通和促进知识共享的重要性。 协作是组织成功的关键部分&#xff0c;通过明确的远景和使…