因为工作的原因不得不学习前端开发,项目中使遥是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开发