需求说明
虽然 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,自动运行!完美