当前位置: 首页 > news >正文

在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,并可查看打印等输出内容

1、在vscode中安装插件 Code Runner

2、安装ts包

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

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

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

相关文章:

在vscode中使用Typescript并运行

首先呢,我们在学习ts之前,需要先安装ts 1、安装 typescript npm install -g typescript //检查是否安装tsc -v ​ 2、生成配置文件,cd进入该文件夹,在控制台输 tsc --init ​ 此时我们就可以看到在ts文件夹下面出现了 一个tsco…...

【C++提高编程】C++全栈体系(十九)

C提高编程 第三章 STL - 常用容器 一、string容器 1. string基本概念 本质: string是C风格的字符串,而string本质上是一个类 string和char * 区别: char * 是一个指针string是一个类,类内部封装了char*,管理这个…...

Java版电能表协议解析源码(DL/T645-2007)、Modbus串口虚拟工具、网络串口调试工具分享

什么是Modbus通信协议Modbus串口调试工具Java版协议解析源码 网络与串口二合一调试助手TCPCOM: https://download.csdn.net/download/liuyuan_java/87454762 Modbus调试工具,模拟串口调试工具 https://download.csdn.net/download/liuyuan_java/874274…...

2023美赛选题建议 美国大学生数学建模竞赛ABCDEF题

选题建议和粗略思路已更新完毕 对于没有基础的同学来说CD两题上手难度较高,大家可以根据自己的实际情况选择最适合自己的题目,团队将持续更新各题后续内容,Q群322297051 A题主要难度就是建立第一问的模型,综合来看难度不大&…...

2023,想跳槽的可以再等等

今天讲讲跳槽。 金三银四即将开启,一些不满现状,被外界的“高薪”“好福利”吸引的人,一般就在这时候毅然决然地跳槽了。 跳槽是为了寻求更好的发展,但在跳槽前我们也不能确定下家就是更好的归宿,这就更加需要我们审…...

Java之滑动窗口详解

目录 一.滑动窗口 1.什么滑动窗口 2.滑动窗口的三要素 二.找到字符串中所有字母异位词 1.题目描述 2.问题分析 3.代码实现 三.字符串的排列 1.题目描述 2.问题分析 3.代码实现 四.考试的最大困扰度 1.题目描述 2.问题分析 3.代码实现 五.替换后的最长重复字符 …...

Webpack(应用一:基本使用,只需六步骤)

前言 上一篇文章已经说明了webpack的定义以及需求 本偏文章主要讲解webpack的基本使用 tips:现在以vscode编辑器来展示,只需要几个步骤就可以实现webpack的基本使用。 一、首先要安装node.js 1、不会安装node.js的,可以在网上自己找教程来…...

【Python小游戏】智商爆棚,推荐一款益智类亲子娱乐首选—某程序员老爸:成语编成填空“游戏”,贪玩女儿1天牢记500词(厉害了我的Python)

前言 成语填空想必大家都是十分熟悉的了,特别是有在上小学的家长肯定都有十分深刻的印象。 在我们的认知里看图猜成语不就是一些小儿科的东西吗? 当然了你也别小看了成语调控小游戏,有的时候知识储备不够,你还真的不一定猜得出…...

使用web3连接Georli测试网络

文章目录1.使用geth方式在终端2.写成脚本2.1 通过metamask (现成的太复杂,搞不太来)2.2 通过自己的接口3.通过truffle方式连接 (不成功)目前的工作情况是,已在remix写好执行合约并部署在Georli测试网络中&a…...

Python uWSGI 的安装配置

以 Ubuntu/Debian 为例,先安装依赖包: apt-get install build-essential python-dev Python 安装 uWSGI 1、通过 pip 命令: pip install uwsgi 2、下载安装脚本: curl http://uwsgi.it/install | bash -s default /tmp/uwsgi 将…...

033.Solidity入门——20函数的可视范围

修饰符可见性描述public在合约内和合约外都可以被访问,即合约内外部都可以调用该函数。这种类型的函数可以被合约内和合约外的任何地址调用。private只有在当前合约内可以被访问,即只有合约内可以调用该函数。这种类型的函数只能在合约内部被调用。exter…...

智能家居项目(三)之框架设计及框架代码文件工程建立

目录 一、智能家居项目框架设计草图 二、框架代码文件工程建立 三、添加声音识别模块的串口读取功能 一、智能家居项目框架设计草图 代码思路讲解: 1、一个指令工厂,一个控制工厂,实际上就是通过链表链起来的数据。具体怎么链接起来&…...

全网最全的Ansible中常用模块讲解

目录 前言 一、ansible实现管理的方式 二、Ad-Hoc执行方式中如何获得帮助 三、ansible命令运行方式及常用参数 四、ansible的基本颜色代表信 五、ansible中的常用模块 1、command 2、shell 3、script 4、copy 5、fetch 6、file 7、 unarchive 8、archive 9、h…...

linux程序分析工具

嵌入式调试工具1. nm2. addr2line3. readelf3.1 ELF 文件分类3.2 ELF文件组成3.3使用1. nm nm源于name,是linux下一个文本分析工具,可以罗列指定文件中的符号(函数名、变量,以及符号类型)。 nm命令参数如下: 用法:nm …...

Python3,2分钟掌握Doscoart库,你也能成为艺术家。

2行代码绘制水彩画1、引言2、 代码实战2.1 模块介绍2.2 模块安装2.3 代码示例2.3.1 创建默认图片2.3.2 设置参数创建图片2.3.3 查看设置参数2.3.4 查看配置2.3.5 保存配置2.3.6 加载配置2.3.7 导出配置文件2.3.7 生成Python代码2.3.8 调用文档3、总结1、引言 小屌丝&#xff1…...

1225057-68-0,Alkyne PEG4 TAMRA-5,四甲基罗丹明-四聚乙二醇-炔基TAMRA红色荧光染料连接剂

中英文别名:CAS号:1225057-68-0 | 英文名:5-TAMRA-PEG4-Alkyne |中文名:5-四甲基罗丹明-四聚乙二醇-炔基物理参数:CASNumber:1225057-68-0Molecular formula:C36H41N3O8Molecular weight&#x…...

Ae:解释素材

所谓解释素材 Interpret Footage,就是通过修改素材的某些属性(像素长宽比、帧速率、颜色配置文件及 Alpha 通道类型等),让它能更好地参与到合成中去。Ae菜单:文件/解释素材快捷键:Ctrl Alt G在项目面板里…...

无文件攻击

无文件攻击是一种高级持续性威胁(APT)的攻击方式,它不会在目标系统的磁盘上留下可执行文件,而是利用系统内置的工具或脚本执行恶意代码,从而绕过传统的安全防护措施。无文件攻击的最大特点就是恶意代码直接在内存中运行…...

JS高级——数据类型

数据类型 基本类型 String: 任意字符串Number: 任意的数字boolean: true/falseundefined: undefinednull: null 对象类型 Object: 任意对象Function 一种特别的对象(可以执行)Array: 一种特别的对象 判断 typeof //不能区分数组与对象、null与obje…...

场景案例│数字员工在银行业的典型应用场景,效率及准确率“双高”

伴随数字经济的高速发展,企业数字化转型步伐不断加快,银行内部信息系统越趋复杂,业务处理的自动化及智能化需求日益旺盛。调查显示,数字员工为60~75%的银行流程带来约30~40%的效能提升,能够全面帮助银行在各场景流程中…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...

【位运算】消失的两个数字(hard)

消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署,直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型,但是目前国内可能使用不多,至少实践例子很少看见。开发训练模型就不介绍了&am…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

如何在网页里填写 PDF 表格?

有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据&#xff…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、👨‍🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨‍&#x1f…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...