TS 全栈学习教程
从零基础开始，逐步掌握 TypeScript 全栈开发，最终完成一个类似 ChatGPT 的 AI Agent 网站。
这个教程适合谁
- 零基础或几乎零基础的编程学习者
- 希望用 TypeScript 做全栈开发的人
- 想学习 2026 年最新技术栈的人
- 终极目标是构建 AI Agent 应用
你将学到什么
经过六个阶段的学习，你将掌握：
- TypeScript — 类型安全的 JavaScript 超集
- Next.js 16 — 2026 年最主流的全栈框架
- React 19 — 构建交互式 UI
- PostgreSQL + Drizzle ORM — 数据库设计与查询
- Vercel AI SDK v6 — 接入大语言模型（LLM）
- MCP 协议 — 让 Agent 调用外部工具
- Agent 系统 — 并行工具调用、Skills 管理、记忆系统
六个阶段
| 阶段 | 主题 | 交付项目 |
|---|---|---|
| 一 | JavaScript → TypeScript + 开发环境 | CLI 待办事项管理器 |
| 二 | Web 基础 + React + Next.js | 静态博客网站 |
| 三 | 数据库 + 后端开发 | 带用户系统的留言板 |
| 四 | 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 |
| PostgreSQL | 最新 | 数据库（Supabase 免费托管） |
| Better Auth | 1.6 | 认证 |
| Vercel AI SDK | v6 | AI 集成 |
| MCP SDK | 1.29+ | Agent 工具 |
| Vitest | 最新 | 单元/集成测试 |
| Playwright | 最新 | E2E 浏览器测试 |
如何使用本教程
- 按顺序学习。每篇教程都依赖前面学过的知识。
- 动手写代码。不要只读不写，每个示例都要自己跑一遍。
- 完成练习。每篇末尾有 3-5 道练习，附有答案，但先自己做再看答案。
- 善用 AI 工具。用 Claude Code / Cursor 帮助你理解代码、调试错误。
- 提交到 GitHub。每个阶段的交付项目都是你的作品集。
开始学习
点击左侧边栏「阶段一 → 01. 终端基础与命令行」，开始你的学习之旅。