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,一经查实,立即删除!

相关文章

【Linux】部署 GitLab 服务

1、配置实验环境 安装git apt install git 安装docker apt install docker 安装tree apt install tree 2、安装 Gitlab 下载官方库与安装包 下载官方库的安装脚本 curl https://packages.gitlab.com/install/repositories/gitlab/gitlab-ee/script.deb.sh | sudo bas…

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…

使用docker搭建squid和ss5

docker run -d --name squid-container -e TZAsia/Shanghai -p 自定义端口并记得开放:3128 ubuntu/squid docker exec -it squid-container /bin/bash apt update && apt install vim # 修改 http_port 3128 为 http_port 0.0.0.0:3128 # 修改 http_access deny all 为…

天池大赛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空间中去提取特征,实现目标检测、地图构建等任务。如何把多路相机的…

在Android中使用ProgressBar显示进度

在Android中使用ProgressBar显示进度 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们将探讨如何在Android应用中使用ProgressBar来显示进度。ProgressB…

软考 系统架构设计师系列知识点之杂项集萃(46)

接前一篇文章:软考 系统架构设计师系列知识点之杂项集萃(45) 第73题 支持电子邮件加密服务的标准或技术是( )。 A. PGP B. PKI C. SET D. Kerberos 正确答案:A。 所属知识点:旧版教材 信息…

提防远程攻击:了解正向 Shell 和反向 Shell 确保服务器安全

前言 在当今网络安全形势日益复杂的环境中,了解正向 Shell 和反向 Shell 的工作原理和使用场景,对于保护你的服务器免受远程攻击至关重要。本文不仅深入解析这两种常见的远程控制技术,还将提供有效的防护建议,帮助你提升服务器的…

代码随想录算法训练营Day37 |01背包登场,416. 分割等和子集

今天学习了一个新的内容——01背包,应用场景是这样的,你有一个背包最多能装重量为maxweight重量的物品,你有n个物品,他们的价值分别为value[i],重量分别为weight[i],其中i为物品的下标,每件物品…

关于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[]; //数组大小未知(柔性数组成员) }; 柔性数组的特点: 结构体中柔性…

入门JavaWeb之 MVC、Filter 过滤器和监听器

MVC 三层架构: Model(模型)、View(视图)、Controller(控制器) 控制器:Controller,可以理解成 Servlet 1.接收用户的请求(req:请求参数、Sessio…

fastapi获取请求路径

fastapi获取请求路径 在FastAPI中,你可以使用fastapi.Request对象来获取请求路径。 from fastapi import FastAPI, Requestapp FastAPI()app.get("/items/{item_id}") async def read_item(request: Request, item_id: str):# 获取完整的请求路径reque…

java技术:knife4j实现后端swagger文档

一、pom依赖 <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId><version>3.0.2</version> </dependency> lombok依赖 <dependency><groupId>org.proje…