网站首页 > 技术文章 正文
因为工作的原因不得不学习前端开发,项目中使遥是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-05-09 Vite 的实现原理,确实很巧妙(深入vite原理)
- 2025-05-09 微信小程序中使用云函数进行开发(微信小程序创建云函数)
- 2025-05-09 详细讲解npm install命令执行,都干了哪些事情?
- 2025-05-09 如何在 Node.js 中使用 .env 文件管理环境变量 ?
- 2025-05-09 离线环境下运行Vue项目(离线安装vue-cli)
- 2025-05-09 《小鑫发现》之GraphQL框架Prisma
- 2025-05-09 如何写一个webpack插件(一)(webpack常用插件和loader)
- 2025-05-09 Node.js 是怎么找到模块的?(nodejs官方模块)
- 2025-05-09 将 node_modules 目录放入 Git 仓库的优点
- 2025-05-09 在Node.js中处理Zip文件(node.js zip)
- 最近发表
- 标签列表
-
- cmd/c (64)
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- c#console.writeline不显示 (75)
- pythoncase语句 (81)
- es6includes (73)
- sqlset (64)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- chromepost (65)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- & (66)
- java (73)
- js数组插入 (83)
- linux删除一个文件夹 (65)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)