搭建一个本地轻量级且好用的学习TypeScript语言的环境

news2025/1/11 14:30:23

在这里插入图片描述

需求说明

虽然 TypeScript 的在线 Playground 很方便 https://www.tslang.com.cn/play/,但毕竟是在浏览器中使用,没有本地的 IDE 那么顺手。所以我想搭建一个本地类似 Playground 的环境,这样在学习 TypeScript 的过程中,可以更方便地编写一些简单的示例代码.

具体有以下三点需求:

使用 WebStorm 编辑代码,因为这是我最熟悉的环境.
编辑中的文件可以实时提示 TypeScript 的语法错误.
工程中的 TypeScript 文件编辑保存后,可以自动触发工程主文件 index.ts 的执行.

本地环境

系统:mac mini M2 14.5 (23F79)
IDE: WebStorm 2024.1.5
终端:iterm2 3.5.3

方案选型

使用npm创建一个简单的nodejs工程,基于 ts-node nodemon来实现
ts-node-dev的说明:

ts-node 是一个 TypeScript 执行引擎和 REPL(Read-Eval-Print Loop)环境,用于 Node.js。它允许你在 Node.js 环境中直接运行 TypeScript 代码,而无需事先将代码编译成 JavaScript
。以下是 ts-node 的一些主要功能和特点:

功能
即时编译(JIT):ts-node 在运行时将 TypeScript 代码即时转换为 JavaScript,这样你可以在 Node.js 中直接执行 TypeScript 文件
。
REPL 支持:它提供了一个交互式的命令行环境,允许你输入和执行 TypeScript 代码
。
模块解析:通过挂钩 Node.js 的模块加载 API,ts-node 能够无缝地与其他 Node.js 工具和库一起使用
。
源码映射:在错误堆栈中自动提供源码映射,方便调试
。
使用场景
快速原型开发:由于不需要编译步骤,ts-node 适合快速开发和测试原型
。
脚本工具开发:可以用于编写构建任务、测试脚本等,利用 TypeScript 的类型系统提高代码的可靠性
。
Node.js 应用开发:在大型项目中,使用 ts-node 可以加速开发和调试过程

nodemon 是一个用于 Node.js 应用程序的开发工具,它会监视你指定的文件或目录中的任何更改,并在检测到更改时自动重启应用程序。这使得开发过程更加高效,因为你不需要手动停止和启动应用程序来加载最新的代码更改。

功能
自动重启:当你的代码文件发生变化时,nodemon 会自动重启应用程序,无需手动干预.
灵活的配置:可以通过配置文件或命令行参数来指定要监视的文件、目录、忽略的文件等.
支持多种运行环境:可以与各种 Node.js 运行环境结合使用,如 node、ts-node 等.
日志输出:提供详细的日志输出,帮助你了解应用程序的启动和重启过程.
使用场景
开发 Node.js 应用程序:在开发过程中,使用 nodemon 可以节省大量的时间,提高开发效率.
快速迭代:适合需要频繁更改代码并测试的应用程序开发,如 Web 应用、API 服务等.

操作步骤

第一步:用npm创建一个空的工程(npx tsc --init这步很关键,需要好ts的编译配置!)

mkdir demo
cd demo
npm init -y
npx tsc --init 
npm install ts-node nodemon --save-dev

用Webstorm打开工程,并创建src目录跟index.ts文件

在这里插入图片描述

第二步:配置与启动
配置nodemon: 创建一个nodemon.json文件来配置nodemon,使其监视src目录下的文件变化并使用ts-node运行index.ts。

{
  "watch": ["src"],
  "ext": "ts",
  "exec": "ts-node src/index.ts"
}

在这里插入图片描述

更新package.json中的脚本: 添加一个新的脚本来使用nodemon监视和运行index.ts文件。
在这里插入图片描述

说明

nodemon.json:
watch: 指定监视的目录,这里是src。
ext: 指定监视的文件扩展名,这里是ts。
exec: 指定执行的命令,这里是使用ts-node运行src/index.ts。
package.json:
dev: 添加了一个新的脚本dev,使用nodemon来监视和运行index.ts文件。

在终端启动

在这里插入图片描述
编辑代码后,commad + s,自动运行!完美
在这里插入图片描述

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

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

相关文章

项目管理之引论

在当今这个快速变化、竞争激烈的商业环境中,项目管理已经成为组织实现目标、提升竞争力的关键手段。无论是企业的新产品研发、建筑项目的施工,还是政府部门的公共服务项目推进,都离不开有效的项目管理。以下是我对项目管理的一些初步见解和认…

20250109使用M6000显卡在Ubuntu20.04.6下跑whisper来识别中英文字幕

20250109使用M6000显卡在Ubuntu20.04.6下跑whisper来识别中英文字幕 2025/1/9 20:57 https://blog.csdn.net/wb4916/article/details/144541848 20241217使用M6000显卡在WIN10下跑whisper来识别中英文字幕 步骤: 1、在NVIDIA的官网下载并安装M6000显卡在WIN10下的最…

Windows service运行Django项目

系统:Windows Service 软件:nssm,nginx 配置Django项目 1、把Django项目的静态文件整理到staticfiles文件夹中 注:settings中的设置 STATIC_URL /static/ STATIC_ROOT os.path.join(BASE_DIR, staticfiles/) STATICFILES_DI…

关于物联网的基础知识(二)——物联网体系结构分层

成长路上不孤单😊😊😊😊😊😊 【14后😊///计算机爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于物联网的基础知识(二&a…

【C++】22.AVL树实现

文章目录 1. AVL的概念AVL树的逻辑理解四种形式1. LL型(左孩子的左子树上出现节点使结点失衡)2. RR型(右孩子的右子树上出现节点使结点失衡)3. LR型(左孩子的右子树上出现节点使结点失衡)4. RL型&#xff0…

php文件包含漏洞

基本 相关函数 php中引发文件包含漏洞的通常是以下四个函数: include()include_once()require()require_once() reuqire() 如果在包含的过程中有错,比如文件不存在等,则会直接退出,不执行后续语句。 include() 如果出错的话&a…

ELK实战(最详细)

一、什么是ELK ELK是三个产品的简称:ElasticSearch(简称ES) 、Logstash 、Kibana 。其中: ElasticSearch:是一个开源分布式搜索引擎Logstash :是一个数据收集引擎,支持日志搜集、分析、过滤,支持大量数据…

预训练语言模型——BERT

1.预训练思想 有了预训练就相当于模型在培养大学生做任务,不然模型初始化再做任务就像培养小学生 当前数据层面的瓶颈是能用于预训练的语料快被用完了 现在有一个重要方向是让机器自己来生成数据并做微调 1.1 预训练(Pre - training)vs. 传…

ElasticSearch 认识和安装ES

文章目录 一、为什么学ElasticSearch?1.ElasticSearch 简介2.ElasticSearch 与传统数据库的对比3.ElasticSearch 应用场景4.ElasticSearch 技术特点5.ElasticSearch 市场表现6.ElasticSearch 的发展 二、认识和安装ES1.认识 Elasticsearch(简称 ES)2.El…

mysql和redis的最大连接数

平时我们要评估mysql和redis的最大连接数,可以选择好环境(比如4核8G),定好压测方法(没有索引的mysql单表,redis单key)进行压测,评估其最大并发量。 也可以查看各大云厂商的规格进行评估。 mys…

2025年中科院分区大类划分公布!新增8155本

2025年中科院分区表变更情况 扩大收录范围 2025年的期刊分区表在原有的自然科学(SCIE)、社会科学(SSCI)和人文科学(AHCI)的基础上,增加了ESCI期刊的收录,并根据这些期刊的数据进行…

机器人避障不再“智障”:HEIGHT——拥挤复杂环境下机器人导航的新架构

导读: 由于环境中静态障碍物和动态障碍物的约束,机器人在密集且交互复杂的人群中导航,往往面临碰撞与延迟等安全与效率问题。举个简单的例子,商城和车站中的送餐机器人往往在人流量较大时就会停在原地无法运作,因为它不…

Spring Boot教程之五十二:CrudRepository 和 JpaRepository 之间的区别

Spring Boot – CrudRepository 和 JpaRepository 之间的区别 Spring Boot建立在 Spring 之上,包含 Spring 的所有功能。由于其快速的生产就绪环境,使开发人员能够直接专注于逻辑,而不必费力配置和设置,因此如今它正成为开发人员…

加速物联网HMI革命,基于TouchGFX的高效GUI显示方案

TouchGFX 是一款针对 STM32 微控制器优化的先进免费图形软件框架。 TouchGFX 利用 STM32 图形功能和架构,通过创建令人惊叹的类似智能手机的图形用户界面,加速了物联网 HMI 革命。 TouchGFX 框架包括 TouchGFX Designer (TouchGFXDesigner)(…

Java-数据结构-栈与队列(StackQueue)

一、栈(Stack) ① 栈的概念 栈是一种特殊的线性表,它只允许固定一端进行"插入元素"和"删除元素"的操作,这固定的一端被称作"栈顶",对应的另一端就被称做"栈底"。 📚 栈中的元素遵循后…

案例研究:UML用例图中的结账系统

在软件工程和系统分析中,统一建模语言(UML)用例图是一种强有力的工具,用于描述系统与其用户之间的交互。本文将通过一个具体的案例研究,详细解释UML用例图的关键概念,并说明其在设计结账系统中的应用。 用…

【动态规划篇】欣赏概率论与镜像法融合下,别出心裁探索解答括号序列问题

本篇鸡汤:没有人能替你承受痛苦,也没有人能拿走你的坚强. 欢迎拜访:羑悻的小杀马特.-CSDN博客 本篇主题:带你解答洛谷的括号序列问题(绝对巧解) 制作日期:2025.01.10 隶属专栏:C/C题…

点击底部的 tabBar 属于 wx.switchTab 跳转方式,目标页面的 onLoad 不会触发(除非是第一次加载)

文章目录 1. tabBar 的跳转方式2. tabBar 跳转的特点3. 你的配置分析4. 生命周期触发情况5. 总结 很多人不明白什么是第一次加载,两种情况讨论,第一种情况假设我是开发者,第一次加载就是指点击微信开发者工具上边的编译按钮,每点击…

CUDA、CUDNN以及tensorRT的版本对应关系

各版本的对应除了可以看文件的命名上还可以查看TensorRT的Release日志: Release Notes :: NVIDIA Deep Learning TensorRT Documentation 这个是官方测试TensorRT的Release日志,里面指明了当前测试的TensorRT版本是在哪个CUDNN等库下的测试结果&#x…

设计模式(观察者模式)

设计模式(观察者模式) 第三章 设计模式之观察者模式 观察者模式介绍 观察者模式(Observer Design Pattern) 也被称为发布订阅模式 。模式定义:在对象之间定义一个一对多的依赖,当一个对象状态改变的时候…