VsCode:配置TypeScript开发环境

一、前提

电脑已经安装了npm
何如安装npm,请点击查看Node.js、npm常用命令、安装多个node版本

提醒:下文讲解操作是在mac 系统进行的,TypeScript简称:ts

二、安装TypeScript

  1. 在终端里执行命令:npm install -g typescript
  2. 查看版本,在终端执行命令:tsc -v
    在这里插入图片描述
  3. 安装ts-node
    终端里执行命令:npm install -g ts-node
  4. 查看ts-node版本,在终端里执行命令:ts-node -v
    在这里插入图片描述

三、创建TypeScript项目

  1. 创建名为LearnTypeScript文件夹
  2. 在LearnTypeScript文件夹里面新建dist 和 src两个文件夹
    dist文件夹用于存放ts文件转换的js文件
    src文件夹用于存放ts文件
  3. 初始化ts项目,
    终端里切换到LearnTypeScript文件夹
    执行命令:tsc --init,按下回车键,然后会生成tsconfig.json文件
    在这里插入图片描述
  4. 在终端里执行命令:npm init -y ,则会生成package.json文件
  5. 项目文件图
    在这里插入图片描述

四、使用VsCode打开LearnTypeScript项目

4.1 修改tsconfig.json文件

打开tsconfig.json ,将:rootDir和outDir的注释放开, 修改如下所示
“rootDir”: “./src”,
在这里插入图片描述

“outDir”: “./dist”,
在这里插入图片描述

提醒:修改完后记得保存一下

4.2 在src目录里创建test.ts文件

在这里插入图片描述

4.3 添加vscode的task.json文件
  1. 按下cmd+shift+B执行编译指令:
    因为没有配置tasks.json,vscode并没有执行编译任务;出现如下弹框
    在这里插入图片描述
4.4 vsocde根据tsconfig提供了两种编译方式

方式一: 整个项目build,特点就是慢;
方式二:watch模式,就是通过监听你修改了ts文件,自动后台编译,特点就是快

4.5 添加tsc:bulid - tsconfig.json配置

在这里插入图片描述

点击上图最右边的齿轮按钮添加默认添加了配置,此时项目当中新增了.vscode/task.json;如下图所示:
在这里插入图片描述

tasks.json文件代码
在这里插入图片描述

添加好build之后,开始编译test.ts文件
在这里插入图片描述
在这里插入图片描述

查看dist文件夹里来自test.ts文件编译生成的test.js文件
在这里插入图片描述

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

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

相关文章

1panel 搭建多个网站

1panel 部署多个网站,另外的域名,或无域端口搭建方法。 当我们已经部署好一个网站后,想再部署一个网站在我们的服务器上时, 步骤:(另外的域名,部署在同一个服务器方法) 运行环境里…

六、资产安全—信息分级资产管理与隐私保护(CISSP)

目录 1.信息分级 2.信息分级方法 3.责任的层级 4.资产管理 5.隐私数据管理角色 6.数据安全控制 7.数据保护方案 8.使用安全基线 六、资产安全—数据管理(CISSP): 五、身份与访问管理—身份管理和访问控制管理(CISSP): 1.信息分级 信息分级举列: 2.信息分级方…

K8S 角色/组件及部署方式的简单概述

1.宏观架构图 2.角色详情 2.1 Master(Controller Plane) 早期是叫 Master 节点,后期改名为 Controller Plane,负责整个集群的控制和管理 Master 不会干活的(当然你让它干也是会干的,涉及到污点容忍),而是起到访问入口&#xff…

天池大赛Higress插件官方demo详细部署+调试

天池大赛Higress插件官方demo详细部署调试 契机 ⚙ 使用Higress AI网关优化AI调用成本。就是基于向量召回相似问题的缓存,降低LLM API调用成本。就是开发一个网关插件做QA缓存嘛。前文已经成功复现了hello-world插件,这次结合官方提供的AI-Cache插件自…

SecureBoost:一种无损的联邦学习框架

SecureBoost:一种无损的联邦学习框架 文章目录 SecureBoost:一种无损的联邦学习框架1 引言2 预备知识与相关工作3 问题描述4 联邦学习与SecureBoost5 联邦推理6 无损属性的理论分析7 安全讨论8 实验9 结论 摘要——用户隐私保护是机器学习中的一个重要问…

LSS论文与代码详解

本文首发于公众号【DeepDriving】,欢迎关注。 0. 前言 最近几年,BEV感知是自动驾驶领域中一个非常热门研究方向,其核心思想是把多路传感器的数据转换到统一的BEV空间中去提取特征,实现目标检测、地图构建等任务。如何把多路相机的…

关于bim数字孪生threejs中使用glb文件大小优化及加载慢的说明(笔记)

在用three.js开发的时候发现,稍微大一点的glb或者fbx文件加载的时候很慢很卡 一直不理解这个卡和慢取决于哪些条件,下面来详细说一下 1、关于模型 不是越大加载越卡顿,而是却决于三角面数量,当累计三角面数量达到3000万时会出现明…

ASUS/华硕天选5 FX607J系列 原厂Windows11系统

安装后恢复到您开箱的体验界面,带原机所有驱动和软件,包括myasus mcafee office 奥创等。 最适合您电脑的系统,经厂家手调试最佳状态,性能与功耗直接拉满,体验最原汁原味的系统。 原厂系统下载网址:http:…

LLaMA2模型训练加速秘籍:700亿参数效率提升195%!

点击蓝字 关注我们 关注并星标 从此不迷路 计算机视觉研究院 公众号ID | 计算机视觉研究院 学习群 | 扫码在主页获取加入方式 开源地址:https://github.com/hpcaitech/ColossalAI 计算机视觉研究院专栏 Column of Computer Vision Ins…

Microsoft Defender防病毒怎么关闭!详细步骤看这里!

Microsoft Defender是Windows系统中的防病毒软件,提供了实时的安全保护功能。但是,在某些情况下,用户想要关闭系统内的Microsoft Defender功能,但不知道要怎么操作才能关闭?接下来小编给大家带来详细的关闭步骤介绍。 …

柔性数组(flexible array)

柔性数组从C99开始支持使用 1.柔性数组的概念 概念: 结构体中,结构体最后一个元素允许是未知大小的数组,这就叫[柔性数组]的成员 struct S {int n;char arr[]; //数组大小未知(柔性数组成员) }; 柔性数组的特点: 结构体中柔性…

VBA技术资料MF170:调整多个工作薄中签名位置

我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的工作效率,而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套,分为初级、中级、高级三大部分,教程是对VBA的系统讲解&#…

数据可视化如何为智慧农业带来变革

数据可视化如何为智慧农业保驾护航?随着农业现代化的深入推进,智慧农业应运而生,通过集成物联网、大数据、人工智能等先进技术,实现农业生产的数字化、智能化和高效化。而在这一过程中,数据可视化技术作为重要的工具&a…

主从复制、哨兵以及Cluster集群

目录 1.Redis高可用 2.Redis主从复制 2.1 主从复制的作用 2.2 主从复制流程 2.3 搭建Redis主从复制 2.3.1 修改Redis配置文件(Master节点操作) 2.3.2 修改Redis配置文件(Slave节点操作) 2.3.2 验证主从复制结果 3.Redis哨…

基于改进天鹰优化算法(IAO)优化支持向量机(SVM)数据回归预测(IAO-SVM)

改进天鹰优化算法(IAO)见:【智能优化算法】改进的AO算法(IAO)-CSDN博客 支持向量机(SVM)数据时序预测:基于支持向量机的数据回归预测-CSDN博客 代码原理 基于改进天鹰优化算法(IAO)优化支持向量机(SVM)数…

代码随想录算法训练营第三十七天|01背包问题、分割等和子集

01背包问题 题目链接:46. 携带研究材料 文档讲解:代码随想录 状态:忘了 二维dp 问题1:为啥会想到i代表第几个物品,j代表容量变化? 动态规划中,每次决策都依赖于前一个状态的结果,在…

Java中使用键盘录用【Scanner】遇到的问题

目录 一、空格截断问题:二、next()、nextInt()、nextDouble()等nextXxx()与nextLine()连用、混用的问题:问题描述:代码演示问题问题原因:解决办法:示例代码: 最后 Java中使用键盘录入,尤其是通过…

ROS2开发机器人移动

.创建功能包和节点 这里我们设计两个节点 example_interfaces_robot_01,机器人节点,对外提供控制机器人移动服务并发布机器人的状态。 example_interfaces_control_01,控制节点,发送机器人移动请求,订阅机器人状态话题…

力扣SQL50 员工的直属部门 子查询 双重

Problem: 1789. 员工的直属部门 👨‍🏫 参考题解 Code select employee_id, department_id from Employee where primary_flag Y # Y 表明是直属部门 or employee_id in (select employee_idfrom Employeegroup by employee_idhaving count(employee…

【STM32-MAP文件分析】

STM32-MAP文件分析 ■ MDK编译生成文件简介■ .o■ .axf■ .hex■ .crf■ .d■ .dep■ .lnp■ .lst■ .map■ .build_log.htm■ .htm 文件■ .map 文件 ■ map文件分析■ map 文件的 MDK 设置■ 1. 要生成 map 文件 在 Listing 选项卡里面■ 2. Keil5 中打开.map 文件 ■ map 文…