如何初始化 TypeScript + Node.js 项目

一、先初始化项目(第一步必做)

bash 复制代码
# 1. 创建文件夹并进入 
mkdir ts-node-demo 
cd ts-node-demo 
# 2. 初始化 package.json 
npm init -y

二、安装核心依赖(TypeScript + 运行工具)

bash 复制代码
#开发依赖
npm i -D typescript ts-node nodemon @types/node
#安装express
npm i express
npm i -D @types/express

依赖说明

  • typescript:TS 核心编译器
  • ts-node:直接运行 TS 文件,不用手动编译成 JS
  • nodemon:文件修改自动重启
  • @types/node:Node.js 的 TS 类型定义
  • @types/express:Express 的 TS 类型(用 Express 才装)

三、生成 TS 配置文件 tsconfig.json(最关键)

方法 1:自动生成(推荐)

csharp 复制代码
npx tsc --init

方法 2:直接复制配置

直接在根目录新建 tsconfig.json ,复制下面内容,零配置直接用

json 复制代码
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "rootDir": "./src",        // 你的 TS 源码都放这里
    "outDir": "./dist",       // 编译后的 JS 输出到这里
    "strict": true,           // 开启严格模式(企业必须开)
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],    // 包含 src 下所有文件
  "exclude": ["node_modules"] // 排除依赖
}

四、配置启动脚本(package.json)

打开 package.json,把 scripts 替换成:

json 复制代码
"scripts": {
  "dev": "nodemon src/index.ts",   // 开发模式(热重启)
  "build": "tsc",                  // 编译 TS → JS(生成 dist 文件夹)
  "start": "node dist/index.js"    // 生产运行(上线用)
},

五、创建源码目录 + 测试文件

  1. 创建文件夹 src
  2. src 里新建 index.ts
typescript 复制代码
// src/index.ts
console.log("Hello TypeScript + Node.js 🚀")

// 测试 TS 类型
const sum = (a: number, b: number): number => {
  return a + b
}

console.log(sum(10, 20))

六、运行测试

arduino 复制代码
npm run dev
相关推荐
zopple32 分钟前
前端三剑客 vs Vue.js:核心区别解析
前端·javascript·vue.js
胡志辉的博客39 分钟前
本地明明好好的,怎么一上线就跨域了?把同源策略、前后端分工和 CORS 一次讲明白
前端·javascript·vue.js·reactjs·nextjs·跨域
jiayong231 小时前
第 17 课:任务选择与批量操作
开发语言·前端·javascript·vue.js·学习
源码老李1 小时前
Day 07 · 游戏也要管理状态:场景切换·资源加载·对象池实战
前端·javascript·游戏
donecoding1 小时前
遗嘱、水管与抢救室:TS 切入 Go 的流程控制、接口与并发
javascript·typescript·go
天才熊猫君1 小时前
📄 第三篇:Vue 3 命令式弹窗 Provide 污染与关闭动画修复
前端·javascript·vue.js
天才熊猫君1 小时前
📄 第一篇:Vue 3 命令式弹窗使用指南
前端·javascript·vue.js
天才熊猫君1 小时前
📄 第二篇:Vue 3 命令式弹窗 provide/inject 机制解析
前端·javascript·vue.js
iReachers1 小时前
HTML打包EXE工具数据加密功能详解 - 加密保护HTML/JS/CSS资源
javascript·css·html·html加密·html转exe·html一键打包exe·exe打包