TS 全栈学习教程
从零基础开始，逐步掌握 TypeScript 全栈开发，最终完成一个类似 ChatGPT 的 AI Agent 网站。课程主线走 Next.js 全栈，但会补齐通用 TS 全栈路线里的浏览器 API、React 生态、独立 Node 后端、Redis、Docker、Nginx、CI/CD 和测试体系。
这个教程适合谁
- 零基础或几乎零基础的编程学习者
- 希望用 TypeScript 做全栈开发，并兼顾就业常见技术栈的人
- 想学习 2026 年最新技术栈的人
- 终极目标是构建 AI Agent 应用
你将学到什么
经过六个阶段的学习，你将掌握：
- TypeScript — 类型安全的 JavaScript 超集
- 浏览器 API — DOM、BOM、Fetch、缓存、CORS、DevTools
- Next.js 16 — 2026 年最主流的全栈框架
- React 19 — 构建交互式 UI
- React 生态补充 — React Router、Zustand、TanStack Query
- PostgreSQL + Drizzle ORM — 数据库设计与查询
- Node.js / Prisma / Redis — 独立后端、ORM 对比、缓存与限流
- Vercel AI SDK v6 — 接入大语言模型（LLM）
- MCP 协议 — 让 Agent 调用外部工具
- Agent 系统 — 并行工具调用、Skills 管理、记忆系统
- 工程化部署与质量 — Docker、Nginx、GitHub Actions、Vitest、MSW、Playwright
六个阶段
| 阶段 | 主题 | 交付项目 |
|---|---|---|
| 一 | JavaScript → TypeScript + 浏览器 API + 开发环境 | CLI 待办事项管理器 + 原生 DOM 小应用 |
| 二 | Web 基础 + React 生态 + Next.js | 静态博客网站 |
| 三 | 数据库 + 后端开发 + Node API / Prisma / Redis | 带用户系统的留言板 |
| 四 | AI 接入 — 聊天页面 | ChatGPT 风格聊天页 |
| 五 | Agent 系统核心 | MCP + Skills Agent |
| 六 | 完整项目打磨 + 部署运维 + 测试质量 | 全功能 Agent 网站 |
2026 技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| Node.js | 24 LTS | 运行时 |
| TypeScript | 6.0 | 语言 |
| pnpm | 11.x | 包管理器 |
| Next.js | 16.x | 全栈框架 |
| React | 19.x | 前端 UI |
| Tailwind CSS | 4.x | 样式 |
| shadcn/ui | CLI 4.x | UI 组件（源码复制） |
| Drizzle ORM | 0.45+ | 数据库 ORM |
| Prisma | 最新 | ORM 对比与就业项目阅读能力 |
| PostgreSQL | 最新 | 数据库（Supabase 免费托管） |
| Redis / Upstash | 最新 | 缓存、限流、排行榜、会话 |
| Better Auth | 1.6 | 认证 |
| Vercel AI SDK | v6 | AI 集成 |
| MCP SDK | 1.29+ | Agent 工具 |
| Docker / Nginx | 最新稳定版 | 自托管部署 |
| Vitest | 最新 | 单元/集成测试 |
| React Testing Library / MSW | 最新 | 组件测试和接口 Mock |
| Playwright | 最新 | E2E 浏览器测试 |
如何使用本教程
- 按顺序学习。每篇教程都依赖前面学过的知识。
- 动手写代码。不要只读不写，每个示例都要自己跑一遍。
- 完成练习。每篇末尾有 3-5 道练习，附有答案，但先自己做再看答案。
- 善用 AI 工具。用 Claude Code / Cursor 帮助你理解代码、调试错误。
- 提交到 GitHub。每个阶段的交付项目都是你的作品集。
开始学习
点击左侧边栏「阶段一 → 01. 终端基础与命令行」，开始你的学习之旅。