详解如何使用VSCode搭建TypeScript环境(适合小白)

搭建Javascript环境

因为TypeScript不能直接在浏览器上运行。它需要编译器来编译并生成JavaScript文件。所以需要首先安装好javascript环境,可以参考文章:

详解如何使用VS code搭建JavaScript环境(适合小白)_vscode配置javascript环境-CSDN博客

全局安装Typescript模块

执行下面命令进行安装

npm install -g typescript

安装完成后我们就可以使用 TypeScript 编译器,名称叫 tsc,可将编译结果生成 js 文件。

在cmd窗口中,通过下面命令确认typescirpt是否安装成功

tsc --version

tsc --help

helloworld.ts

创建一个目录TS_DEMO, 然后用 VS Code 打开,创建文件helloworld.ts,里面编码如下:

let message: string = 'Hello World';
console.log(message);

初始化 TypeScript 配置

为了方便自动编译 ts 文件,需要对 TypeScript 进行一些配置,比如生成 tsconfig.json 文件,tsconfig.json 是 TypeScript 编译器的配置文件,用于指定编译 TypeScript 代码时的编译选项和编译目标等信息。通过修改该文件,可以定制 TypeScript 编译器的行为,例如指定编译目标、启用或禁用特定的语言特性、设置代码检查规则等。具体方法如下:

执行命令tsc --init,生成tsconfig.json

然后自定义配置下:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "out",
"sourceMap": true
}
}

添加任务监听 tsconfig.json

VS Code 菜单栏 终端->运行任务... 选择 tsc:watch - tsconfig.json

然后项目会自动编译 helloworld.ts 为 js 文件到 out 目录下,如下图所示:

备注:--watch表示启用监视模式,只要重新保存了ts 文件,就会自动调用tsc将ts 转化为 js。

我们也可以在vs code 的终端中,通过命令 tsc helloworld.ts的方式把ts 文件转为js文件,然后再通过命令node helloworld.js 运行js代码! (因为TypeScript不能直接在浏览器上运行。它需要编译器来编译并生成JavaScript文件),如下图所示:

编写html文件引入js

在实际工作中,我们在html文件中直接引入out文件夹下的js文件即可,例如

<script src="./out/helloworld.js"></script>

一个常见问题

如果出现下面这个错误

tsc : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\tsc.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

解决方法是,以管理员身份打开powershell,输入set-ExecutionPolicy RemoteSigned。

我的每一篇文章都希望帮助读者解决实际工作中遇到的问题!如果文章帮到了您,劳烦点赞、收藏、转发!您的鼓励是我不断更新文章最大的动力!

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

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

相关文章

LeetCode Hot100 437.路径总和III

题目&#xff1a; 给定一个二叉树的根节点 root &#xff0c;和一个整数 targetSum &#xff0c;求该二叉树里节点值之和等于 targetSum 的 路径 的数目。 路径 不需要从根节点开始&#xff0c;也不需要在叶子节点结束&#xff0c;但是路径方向必须是向下的&#xff08;只能从…

不可错过的设计工具!7款亲测好用的网页设计工具推荐!

网页设计并不容易&#xff0c;易于使用的网页设计工具更难找到。随着网络的快速发展&#xff0c;网站迅速崛起&#xff0c;网页设计也很流行。本文收集了 7 种良心和易于使用的网页设计工具&#xff0c;每一种近年来都受到网页设计师的广泛欢迎&#xff0c;以确保实用和易于使用…

抵御代码重用攻击:指针认证(PAC)和分支目标识别(BTI)

目录 一、代码重用攻击历史 二、小工具(Gadgets):它们是什么?为什么它们很危险? 三、ROP攻击

前端技术探秘-Nodejs的CommonJS规范实现原理 | 京东物流技术团队

了解Node.js Node.js是一个基于ChromeV8引擎的JavaScript运行环境&#xff0c;使用了一个事件驱动、非阻塞式I/O模型&#xff0c;让JavaScript 运行在服务端的开发平台&#xff0c;它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。Node中增添了很…

免费商用字体,进来领取!!!

如果你不知道去哪里找免费可商用字体&#xff0c;那一定要收藏好这几个网站&#xff0c;全部都是免费无版权字体&#xff0c;以后再也不用担心侵权问题了。 1、免费字体网 https://font.sucai999.com/ 一个免费可商用字体搬运工&#xff0c;实时跟新市面上免费商用的字体。网站…

高性能无锁队列 moodycamel::ConcurrentQueue

在做一些服务器的架构设计的时候,你不得不考虑现成模型的设计,将不同的业务划分到不同的线程里,如何来调度这些任务是一个值得有经验的架构师需要思考的工作。 很多开发者一说到线程的任务调度就想到了线程池,给他创建一个线程池,多个线程不断地尝试获取任务的信号,一旦线…

国家万亿资金助力城市生命线城市内涝积水监测系统

自2023年年初以来&#xff0c;我国多个地区遭遇了洪涝、干旱、台风、风雹等灾害的侵袭&#xff0c;部分地区灾情严重&#xff0c;经济损失较大。为应对灾后恢复重建工作的艰巨任务&#xff0c;本次国债将主要投向灾后恢复重建以及提升防灾减灾救灾能力。其中&#xff0c;将全面…

12V 全桥驱动芯片GC9008,0.1A 持续驱动输出电流,可替代MX6208

GC9008 是一款 12V 全桥驱动芯片&#xff0c;为 摄像机、消费类产品提供高性价比的方案。能提供 0.1A 的持续输出电流。 可以工作在 4.5~15V 的电源电压上。 GC9008 具有 PW &#xff08; IN1/IN2 &#xff09;输入接口 , 与行业标准器件兼容. GC9008S 是 SOP8 封装&a…

actual combat 23 —— 通过序列化对字典字段生成字典str字段和对应字典标签值

注解&#xff1a;JsonSerialize(using DictSerializer.class) package com.zyjk.common.core.json;import com.fasterxml.jackson.core.JsonGenerator; import com.fasterxml.jackson.databind.BeanProperty; import com.fasterxml.jackson.databind.JsonMappingException; i…

【JavaEE初阶】 博客系统项目--前端页面设计实现

文章目录 &#x1f332;主要内容&#x1f38d;预期效果&#x1f6a9;博客列表页效果&#x1f6a9;博客详情页&#x1f6a9;博客登录页&#x1f6a9;博客编辑页 &#x1f340;实现博客列表页&#x1f6a9;实现导航栏&#x1f388;页面主体部分 &#x1f384;实现博客详情页&…

使用@autowired 多次插入 修改 会数据出错问题

我这段时间 发现的一个问题 如下 使用 Autowired标注一个 类 Autowired ABC abc ;类如下 Date class ABC { A a&#xff1b; B b&#xff1b; C c&#xff1b; }当第一次插入 abc{ a1&#xff1b; b2&#xff1b; cnull&#xff1b; }成功插入a1&#xff1b;b2&#xff1b;…

【多线程】-- 04 静态代理模式

多线程 3 静态代理 这里以一个现实生活中的例子来解释并实现所谓的静态代理模式&#xff0c;即结婚者雇用婚庆公司来帮助自己完成整个婚礼过程&#xff1a; package com.duo.lambda;interface Marry {void HappyMarry();//人生四大乐事&#xff1a;久旱逢甘霖&#xff1b;他…

文件元数据批量修改:mp3音频和mp4视频的元数据如何批量修改

在数字媒体处理和管理的日常工作中&#xff0c;文件元数据的批量修改是一个常见的需求。元数据&#xff0c;或者称为文件信息&#xff0c;可以包括文件的创建日期、修改日期、文件名、文件大小、标签等。在音乐和视频处理领域&#xff0c;例如对mp3音频和mp4视频文件&#xff0…

linux下的工具---gdb

一、gdb简介 GDB,是The GNU Project Debugger 的缩写&#xff0c;是 Linux 下功能全面的调试工具。 GDB支持断点、单步执行、打印变量、观察变量、查看寄存器、查看堆栈等调试手段。 程序的发布方式有两种&#xff0c;debug模式和release模式 Linux gcc/g出来的二进制程序&am…

自驾游汽车托运是交智商税吗?

自驾游汽车托运是交智商税吗? 亲爱的小伙伴们 你们有没有遇到过这样的困扰&#xff1a; 自驾游时&#xff0c;车辆的运输问题让你头疼不已? 是选择自己驾驶还是托运呢? 今天&#xff0c;我就来给大家种草一下汽车托运的好处&#xff0c; 让你的自驾游之旅更加轻松愉快! 1️.…

安防视频监控/磁盘阵列/集中云存储平台EasyCVR设备录像保活不生效原因是什么?该如何解决?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

LeetCode题:581. 最短无序连续子数组,242. 有效的字母异位词,202. 快乐数

581. 最短无序连续子数组 题目要求&#xff1a; 581. 最短无序连续子数组 给你一个整数数组 nums &#xff0c;你需要找出一个 连续子数组 &#xff0c;如果对这个子数组进行升序排序&#xff0c;那么整个数组都会变为升序排序。 请你找出符合题意的 最短 子数组&#xff0c;…

【Linux】安卓端JuiceSSH结合内网穿透实现远程连接服务器

目录 前言1. Linux安装cpolar2. 创建公网SSH连接地址3. JuiceSSH公网远程连接4. 固定连接SSH公网地址5. SSH固定地址连接测试 前言 处于内网的虚拟机如何被外网访问呢&#xff1f;如何手机就能访问虚拟机呢&#xff1f; 本文介绍 cpolarJuiceSSH 实现手机端远程连接Linux虚拟…

4.golang中map的增删改查

map 一种无序的键值对, 它是数据结构 hash 表的一种实现方式。map工作方式就是&#xff1a;定义键和值&#xff0c;并且可以获取&#xff0c;设置和删除其中的值。 声明 // 使用关键字 map 来声明 bMap : map[string]int{"key1": 18} // 使用make来声明 cMap : mak…