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

在这里插入图片描述

需求说明

虽然 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.mzph.cn/pingmian/66470.shtml

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

相关文章

Java中线程中断的几种方式,你了解吗?

Java中线程,可以使用 interrupt() 方法来实现线程的中断,那么,线程中中断的方式有几种呢?接下来,我们将介绍3种不同的线程中断方式,跟随我们的脚步,一起去看看! 目录 第一招&#xf…

GESP5级语法知识(三):双向链表、循环链表

双链表的创建与输出&#xff1a; #include<cstdio> using namespace std; struct node {int data; //data记录这个结点对应元素的值node *next,*pre; //next指向后继 pre指向前驱 }*head,*tail,*p; int n,k; int main() {scanf("%d",&n);headnew no…

homework 2025.01.07 math 6

1选择部分 二填空部分

cursor vip

https://cursor.jeter.eu.org?pf7f4f3fab0af4119bece19ff4a4360c3 可以直接复制命令使用git bash执行即可 命令&#xff1a; bash <(curl -Lk https://gitee.com/kingparks/cursor-vip/releases/download/latest/ic.sh) f7f4f3fab0af4119bece19ff4a4360c3 等待执行完成后…

touch详讲

&#x1f3dd;️专栏&#xff1a;https://blog.csdn.net/2301_81831423/category_12872319.html &#x1f305;主页&#xff1a;猫咪-9527-CSDN博客 “欲穷千里目&#xff0c;更上一层楼。会当凌绝顶&#xff0c;一览众山小。” 目录 基本语法 主要功能 常用选项详解 1. …

UE5本地化和国际化语言

翻译语言 工具 - 本地化控制板 Localization Dashboard 修改图中这几个地方就可以 点击箭头处&#xff0c;把中文翻译成英语&#xff0c;如果要更多语言就点 添加新语言 最后点击编译即可 编译完&#xff0c;会在目录生成文件夹 设置界面相关蓝图中设置 切换本地化语言 必须在…

微信小程序实现登录注册

文章目录 1. 官方文档教程2. 注册实现3. 登录实现4. 关于作者其它项目视频教程介绍 1. 官方文档教程 https://developers.weixin.qq.com/miniprogram/dev/framework/路由跳转的几种方式&#xff1a; https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab…

【C++】18.继承

文章目录 1.继承的概念及定义1.1 继承的概念1.2 继承定义1.2.1定义格式1.2.2继承关系和访问限定符1.2.3继承基类成员访问方式的变化 1.3 继承类模板 2.基类和派生类对象赋值转换3.继承中的作用域3.1 隐藏规则&#xff1a;3.2 考察继承作用域相关选择题 4.派生类的默认成员函数4…

PostgreSQL学习笔记(二):PostgreSQL基本操作

PostgreSQL 是一个功能强大的开源关系型数据库管理系统 (RDBMS)&#xff0c;支持标准的 SQL 语法&#xff0c;并扩展了许多功能强大的操作语法. 数据类型 数值类型 数据类型描述存储大小示例值SMALLINT小范围整数&#xff0c;范围&#xff1a;-32,768 到 32,7672 字节-123INTE…

Bi-Encoder vs. Cross-Encoder

Bi-Encoder vs. Cross-Encoder Bi-Encoder 和 Cross-Encoder 是两种常见的模型架构&#xff0c;主要用于自然语言处理&#xff08;NLP&#xff09;中的文本匹配、问答、检索等任务。它们的主要区别在于如何处理输入文本以及计算相似度的方式。 1. Bi-Encoder&#xff08;双编…

PyQt5 UI混合开发,控件的提升

PromoteLabelTest.py 提升的类 import sys from PyQt5.QtWidgets import QApplication, QWidget,QVBoxLayout,QTextEdit,QPushButton,QHBoxLayout,QFileDialog,QLabelclass PromoteLabel(QLabel):def __init__(self,parent None):super().__init__(parent)self.setText("…

A/B实验之置信检验(一):如何避免误判 (I类) 和漏报 (II类)

假设检验的依据&#xff1a;如何避免误判和漏报 A/B实验系列相关文章&#xff08;置顶&#xff09; 1.A/B实验之置信检验&#xff08;一&#xff09;&#xff1a;如何避免误判和漏报 2.A/B实验之置信检验&#xff08;二&#xff09;&#xff1a;置信检验精要 引言 在数据驱动…

金融租赁系统助力行业转型与升级的创新之路

内容概要 在当今快速发展的商业环境中&#xff0c;金融租赁系统逐渐成为企业转型与升级的重要工具。它通过整合大数据与自动化技术&#xff0c;不仅提升了风险管理的准确性&#xff0c;还加快了审批流程&#xff0c;让企业在激烈的市场竞争中游刃有余。这个系统就像是一位聪明…

Postman接口测试02|接口用例设计

目录 六、接口用例设计 1、接口测试的测试点&#xff08;测试维度&#xff09; 1️⃣功能测试 2️⃣性能测试 3️⃣安全测试 2、设计方法与思路 3、单接口测试用例 4、业务场景测试用例 1️⃣分析测试点 2️⃣添加员工 3️⃣查询员工、修改员工 4️⃣删除员工、查询…

Python标准库之SQLite3

包含了连接数据库、处理数据、控制数据、自定义输出格式及处理异常的各种方法。 官方文档&#xff1a;sqlite3 --- SQLite 数据库的 DB-API 2.0 接口 — Python 3.13.1 文档 官方文档SQLite对应版本&#xff1a;3.13.1 SQLite主页&#xff1a;SQLite Home Page SQL语法教程&a…

HTML 迷宫游戏

HTML 迷宫游戏 相关资源文件已经打包成压缩文件&#xff0c;可双击index.html直接运行程序&#xff0c;且文章末尾已附上相关源码&#xff0c;以供大家学习交流&#xff0c;博主主页还有更多Python相关程序案例&#xff0c;秉着开源精神的想法&#xff0c;望大家喜欢&#xff0…

【Linux】上传、下载、压缩、解压

一、上传、下载 1.1 FinalShell文件系统 我们可以通过FinalShell工具&#xff0c;方便的和虚拟机进行数据交换。 在FinalShell软件的下方窗体中&#xff0c;提供了Linux的文件系统视图&#xff0c;可以方便的&#xff1a; 浏览文件系统&#xff0c;找到合适的文件&#xff0…

以柔资讯-D-Security终端文件保护系统 logFileName 任意文件读取漏洞复现

0x01 产品简介 D-Security终端文件保护系统是一套专注于企业文件管理效率与安全的解决方案,统对文件进行全文加密,而非仅在文件表头或特定部分进行加密,从而大大提高了文件的安全性,降低了被破解的风险。D-Security终端文件保护系统是被政府和国安局等情报单位唯一认定的安…

关于重构一点简单想法

关于重构一点简单想法 当前工作的组内&#xff0c;由于业务开启的时间正好处于集团php-》go技术栈全面迁移的时间点&#xff0c;组内语言技术栈存在&#xff1a;php、go两套。 因此需求开发过程中通常要考虑两套技术栈的逻辑&#xff0c;一些基础的逻辑也没有办法复用。 在这…

新的 WhoisXML API 白皮书重点分析了主要 gTLD 和 ccTLD 注册趋势

任何寻求建立在线存在的人似乎都可以选择无限多的互联网域名注册服务。然而&#xff0c;问题依然存在&#xff1a;哪些提供商更受注册者青睐&#xff1f;WhoisXML API 的研究团队通过分析主要 gTLD&#xff08;通用顶级域&#xff09;和 ccTLD&#xff08;国家或地区顶级域&…