Skip to content

README.md

Latest commit

 

History

History
215 lines (157 loc) · 9 KB

README.md

File metadata and controls

215 lines (157 loc) · 9 KB
Raw

java2ts

Java 工程师的 TypeScript 全栈转型指南

语法上手很快，但真正的挑战在于思维方式的转变：结构化类型 vs 名义类型、单线程异步 vs 多线程、函数式优先 vs 面向对象。

这个仓库帮你用 Java 的视角理解 TypeScript，用最短时间完成从 Spring Boot 到 Node.js 全栈的切换。

特色

  • Java 对照学习 — Spring Boot / JPA / Maven 每个都有等价对比
  • 21 个渐进式项目 — 从 CLI 小工具到全栈应用，每个都能跑
  • 骨架 + 答案 — index.ts 写 TODO，solution.ts 看参考
  • 全栈覆盖 — CLI 工具、Express API、React 前端、Docker 部署

目录结构

.
├── docs/                          # 教程文档
│   ├── part1-js-basics/           # 第一部分：现代 JavaScript 基础
│   ├── part2-ts-basics/           # 第二部分：TypeScript 基础语法
│   ├── part3-ts-advanced/         # 第三部分：类型系统进阶
│   ├── part4-nodejs-tools/        # 第四部分：Node.js 工具开发
│   ├── part5-backend-api/         # 第五部分：后端 API 开发
│   ├── part6-frontend-react/      # 第六部分：前端 React
│   └── part7-engineering/         # 第七部分：工程化实践
│
└── projects/                      # 实践项目
    ├── 01-directory-tree/         # 目录树生成器
    ├── 02-json-merger/            # JSON 配置合并工具
    ├── ...
    └── 21-fullstack-monorepo/     # 全栈 Monorepo

学习路线

第一部分：现代 JavaScript 基础

补齐 ES6+ 基础，理解 JS 与 Java 的核心差异。

教程 内容
运行环境与工具链 Node.js、npm/pnpm、ESM 模块系统
核心语法差异 let/const、箭头函数、解构、展开运算符
异步编程模型 事件循环、Promise、async/await

实践项目：

# 项目 说明
1 目录树生成器 递归遍历目录，输出树形结构
2 JSON 配置合并工具 深度合并多个 JSON 配置文件
3 批量文件重命名器 按规则批量重命名，支持预览模式

第二部分：TypeScript 基础语法

正式进入 TypeScript，掌握类型系统的基本用法。

教程 内容
环境搭建与基础类型 tsc 配置、基础类型、类型推断
函数与对象类型 interface、type、class、函数重载
联合类型与类型收窄 联合类型、可辨识联合、类型守卫

实践项目：

# 项目 说明
4 Markdown 待办解析器 解析 Markdown 待办格式，输出结构化数据
5 命令行参数解析器 解析 CLI 参数，返回强类型配置
6 简易计算器 CLI 联合类型约束操作，处理边界情况

第三部分：类型系统进阶

掌握泛型和高级类型，区分 TS 熟练度的关键。

教程 内容
泛型基础 泛型函数、泛型约束、常见模式
内置工具类型 Partial、Pick、Omit、Record 等
高级类型技巧 条件类型、映射类型、infer

实践项目：

# 项目 说明
7 通用数据缓存模块 泛型缓存类，支持 TTL 和 LRU
8 对象 diff 工具 比较对象差异，类型安全的结果
9 类型安全的事件发射器 事件名与回调参数类型绑定

第四部分：Node.js 工具开发

用 TypeScript 写实际可用的 CLI 工具和自动化脚本。

教程 内容
Node.js 核心模块 fs、path、child_process、process
CLI 工具开发 commander、inquirer、chalk、打包发布
文件处理与自动化 chokidar、glob、Git 集成、定时任务

实践项目：

# 项目 说明
10 代码行数统计工具 按文件类型统计代码/注释/空行
11 项目脚手架生成器 交互式创建项目，模板变量替换
12 Git 提交日志整理器 解析 Conventional Commits 生成 CHANGELOG

第五部分：后端 API 开发

Node.js 服务端开发，对标 Spring Boot 体系。

教程 内容
HTTP 服务基础 Express 路由、中间件、错误处理
数据持久化 SQLite、Prisma ORM、数据库迁移
API 规范与安全 zod 校验、JWT 认证、bcrypt

实践项目：

# 项目 说明
13 RESTful 书签 API Express CRUD，内存存储，zod 校验
14 待办事项 API Prisma + SQLite，三层数据关系
15 带认证的笔记 API 用户注册登录 + JWT + 数据隔离

第六部分：前端 React

前端开发基础，React + TypeScript 组件化开发。

教程 内容
前端工具链 Vite、CSS 方案、项目结构
React + TypeScript 组件、Hooks、事件处理、自定义 Hook
状态管理与数据请求 Context、Zustand、前后端类型共享

实践项目：

# 项目 说明
16 静态个人主页 Vite + 原生 TS，DOM 操作练习
17 书签管理前端 React 组件化，对接书签 API
18 待办事项前端 完整全栈应用，Zustand + Router

第七部分：工程化与综合实践

代码质量、测试、Monorepo、部署。

教程 内容
代码质量工具 ESLint、Prettier、husky、commitlint
测试 Vitest 单元测试、Mock、覆盖率、Playwright
Monorepo 与部署 pnpm workspace、Turborepo、Docker

实践项目：

# 项目 说明
19 团队规范配置包 可发布的 ESLint/Prettier 预设 npm 包
20 笔记 API 测试 单元测试 + 集成测试，覆盖率 >80%
21 全栈 Monorepo 前后端整合，共享类型，Docker 部署

如何使用

学习教程

按顺序阅读 docs/ 目录下的 Markdown 文档，每篇教程都包含：

  • 概念讲解和代码示例
  • Java 等价代码对比
  • 实战练习

完成项目

每个项目目录包含：

projects/xx-project-name/
├── README.md         # 需求说明、实现提示、扩展挑战
├── package.json      # 项目配置和依赖
├── tsconfig.json     # TypeScript 配置（Part 2 起）
├── src/
│   ├── index.ts      # 代码骨架（你来填充实现）
│   └── solution.ts   # 参考答案（遇到困难时查看）

建议流程：

  1. 阅读 README.md 理解需求
  2. 运行 npm install 安装依赖
  3. 在 src/index.ts 的 TODO 标记处编写代码
  4. 遇到困难参考 src/solution.ts
  5. 尝试 README 中的扩展挑战

前置要求

  • 熟悉 Java 编程（Spring Boot / JPA 经验更佳）
  • 安装 Node.js 18+（推荐用 nvm 管理）
  • 安装 VS Code（内置 TypeScript 支持）

推荐资源

资源 说明
TypeScript Handbook 官方手册
Node.js 文档 Node.js API 参考
React 文档 React 官方教程
Type Challenges 类型体操练习

License

MIT

java2ts — 从 Java 到 TypeScript，不只是换个语言，而是换个思维方式。