当前位置：首页 > news >正文

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

news 来源：原创 2025/7/3 9:27:28

在这里插入图片描述

需求说明

虽然 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，自动运行！完美

需求说明

本地环境

方案选型

操作步骤

相关文章：