网站首页 > 技术文章 正文
因为工作的原因不得不学习前端开发,项目中使遥是TypoeScripT所以利用放假时间学习了一下TypeScript的基本知识,现把如何利用Node.js创建一个TypeScript项目的过程记录一下,对想学习TypeScript开发的朋友能有所帮助
1. 确保您已经安装了Node.js和npm(Node.js的包管理器)。您可以在终端中输入以下命令来检查它们的版本:
node -v
npm -v
- 安装 ts-node
先执行 ts-node --version查看电脑上是否已经安装了,如果没有安装的话则执行
npm install -g ts-node
进行安装,这个命令会全局安装 ts-node,使其可以在任何地方通过命令行调用。
在完成基本环境的安装的检查后就可以开始创建项目结构了
1. 初始化项目
# 创建项目目录并进入
mkdir my-ts-node-project
cd my-ts-node-project
# 初始化npm项目(-y跳过提问)
npm init -y
2. 安装依赖
# 安装TypeScript和Node类型定义
npm install typescript @types/node --save-dev
# 可选:安装ts-node和nodemon(开发时实时重载)
npm install ts-node nodemon --save-dev
3. 初始化TypeScript配置
# 生成tsconfig.json
npx tsc --init
修改生成的 tsconfig.json:
{
"compilerOptions": {
"target": "ES2020",
"module": "CommonJS",
"rootDir": "./src",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true
},
"include": ["src/**/*"]
}
4. 创建目录结构
my-ts-node-project/
├── src/
│ └── index.ts # 主入口文件
├── dist/ # 编译后的JS文件(自动生成)
├── node_modules/
├── package.json
└── tsconfig.json
对于SRC的目录需要手工创建一下,创建完成后,在VS-CODE中打开整个项目结构,然后新建终端窗口,在终端窗口里输入touch ./src/index.ts 就可以生成文件
5. 编写示例代码
在 src/index.ts 中写入:
function sayHello(name: string): void {
console.log(`HELLO ${name.toUpperCase()}`);
}
sayHello("world");
6. 配置运行脚本
在 package.json 的 scripts 字段中添加:
{
"scripts": {
"build": "tsc",
"start": "node dist/index.js",
"dev": "nodemon --watch 'src/**/*.ts' --exec ts-node src/index.ts"
}
}
7. 运行项目
方式一:开发模式(实时重载)
npm run dev
# 输出:HELLO WORLD
方式二:编译后运行
npm run build # 编译TS到JS
npm start # 运行编译后的JS
# 输出:HELLO WORLD
关键步骤说明
- TypeScript配置:tsconfig.json 指定了源码目录(src)和编译输出目录(dist)。
- 类型安全:@types/node 提供了Node.js API的类型定义。
- 开发工具:
- ts-node 直接运行TS文件(无需手动编译)
- nodemon 监听文件变化自动重启
最终效果
无论选择 npm run dev 还是 npm run build && npm start,控制台都会输出:
HELLO WORLD
可以根据需求扩展项目结构(如添加 test 目录或 config 文件)
到这里第一个项目结构就生成了,接下来就可以抱起书本认真的开始学习TypeScript开发了,
本人的目标是一周内学会TypeScript开发
猜你喜欢
- 2025-08-01 基于Springboot + vue实现的社团管理系统
- 2025-08-01 前端开发如何用Mock.js进行数据接口模拟
- 2025-08-01 使用vite为vue项目配置@别名
- 2025-08-01 基于Springboot + vue3实现的教务管理系统
- 2025-08-01 gulp前端自动化构建入门指南(一)
- 2025-08-01 快速搭建页面:一款开源可视化拖拽工具
- 2025-08-01 深入 npm 模块安装机制
- 2025-08-01 【推荐】一个基于 Vue 开源的可视化页面生成工具,前端开发利器
- 2025-08-01 告别node_modules黑洞:团队迁移pnpm节省50G磁盘空间实战指南
- 2025-08-01 告别node_modules黑洞!pnpm凭什么吊打npm和yarn?
- 08-03MySQL数据库的预处理详解
- 08-03《阿常·MySQL 70讲》全套教学视频
- 08-03隐式等待、显示等待和强制等待
- 08-03零基础C#上位机框架项目实例(完结篇)
- 08-03一文搞懂构建Web内容的技术
- 08-03西门子WINCC中的VBScript(VBS)常用于自动化脚本开发
- 08-03力控和sql2000之间的数据转储
- 08-03组态王|通过日历控件选择时间段查询历史报警
- 1521℃桌面软件开发新体验!用 Blazor Hybrid 打造简洁高效的视频处理工具
- 626℃Dify工具使用全场景:dify-sandbox沙盒的原理(源码篇·第2期)
- 527℃MySQL service启动脚本浅析(r12笔记第59天)
- 492℃服务器异常重启,导致mysql启动失败,问题解决过程记录
- 492℃启用MySQL查询缓存(mysql8.0查询缓存)
- 479℃「赵强老师」MySQL的闪回(赵强iso是哪个大学毕业的)
- 461℃mysql服务怎么启动和关闭?(mysql服务怎么启动和关闭)
- 458℃MySQL server PID file could not be found!失败
- 最近发表
- 标签列表
-
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (88)
- es6includes (74)
- sqlset (76)
- windowsscripthost (69)
- apt-getinstall-y (100)
- node_modules怎么生成 (87)
- chromepost (71)
- flexdirection (73)
- c++int转char (80)
- htmlbackground-image (68)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- asynccallback (71)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)