搭建一个本地轻量级且好用的学习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,自动运行!完美

相关推荐
toooooop81 小时前
CRMEB 故障排查笔记:安全网关只放行 GET/POST 怎么办
前端·javascript·vue.js·thinkphp6·crmeb
lisw051 小时前
作为人类代理的大语言模型及其角色分类!
人工智能·学习·语言模型
Z21-X1 小时前
云原生运维实战笔记:企业网站综合上云部署与云运维服务全景解析
运维·笔记·学习·云原生
软件技术NINI1 小时前
基于SpringBoot和Vue的项目评审系统
javascript·vue.js·spring boot·后端·spring·毕业设计·毕设
坤坤子吖1 小时前
Linux网络编程:UDP进阶,从字典服务器到简单聊天室
linux·服务器·网络·c++·笔记·学习
vipxieliang2 小时前
JavaScript 模板字符串与标签模板:不只是拼接
前端·javascript
Rabitebla2 小时前
【Linux学习笔记】进程篇(九):进程的创建与退出——fork、写时拷贝与退出码
linux·c++·笔记·学习
楚山之石2 小时前
【MRM】CAPLEX 对比剂灌注 MRI 开源术语库:ISMRM OSIPI 共识报告
图像处理·人工智能·学习·mri
Dream-Y.ocean12 小时前
鸿蒙PC平台宅匠 3D 室内设计适配实战:基于 Electron 壳方案的 Three.js 双渲染引擎与参数化户型编辑器开发
javascript·3d·harmonyos
Highcharts.js13 小时前
Highcharts Gantt使用符号的自定义数据标签开发甘特图示例
javascript·甘特图·highcharts·图表开发·实战代码·响应式图表