TypeScript 全栈 AI 应用实战项目集¶

综合运用：整合本模块所有知识，构建能上简历的完整项目

项目一：TypeScript AI 聊天应用（全栈）¶

技术栈：Next.js 15 + Vercel AI SDK + Hono API + Drizzle + Cloudflare D1
功能：多角色聊天、对话历史持久化、工具调用（天气/代码执行）、流式输出
特色：100% TypeScript，零 any，tRPC 端到端类型安全

项目结构¶

Text Only

ai-chat-app/
├── apps/
│   ├── web/              # Next.js 15 前端
│   └── api/              # Hono API（Cloudflare Workers）
├── packages/
│   ├── shared-types/     # 共享 TypeScript 类型
│   └── ui/               # 共享 UI 组件
└── pnpm-workspace.yaml

核心功能实现清单¶

用户认证（NextAuth + Drizzle adapter）
实时流式聊天（Vercel AI SDK useChat）
对话历史（Cloudflare D1 持久化）
工具调用（天气查询、代码执行）
消息导出（Markdown/PDF）
暗色模式（Tailwind CSS + next-themes）

项目二：类型安全的 REST API 框架¶

技术栈：Fastify 5 + Zod + Prisma + PostgreSQL + GitHub Actions
功能：完整 CRUD，JWT 认证，分页/搜索，文件上传，速率限制
产出：可以作为任何项目的后端模板

学习要点¶

TypeScript

// 这个项目要求你实现：
// 1. 基于 Zod Schema 自动生成 OpenAPI 文档（@fastify/swagger）
// 2. 请求日志记录（pino logger，结构化 JSON 日志）
// 3. 数据库迁移脚本（Prisma migrate）
// 4. Docker 容器化（多阶段构建，最小化镜像）
// 5. GitHub Actions CI/CD（类型检查 + 测试 + 部署）

项目三：MCP 工具服务器¶

技术栈：Hono + Cloudflare Workers + MCP SDK
功能：将你的私有工具暴露给 Claude/GitHub Copilot/Cursor
价值：学习 AI 工具协议的最佳实践

可以构建的工具¶

工具 ID	功能
`search-codebase`	在私有代码库中语义搜索
`query-database`	用自然语言查询数据库
`send-notification`	发送邮件/Slack 通知
`manage-todos`	管理个人任务列表
`analyze-logs`	分析服务器日志

进阶挑战¶

完成以上项目后，挑战这些进阶目标：

为 AI SDK 添加中间件层：实现请求日志、成本追踪、速率限制
构建 TypeScript 类型生成器：从 OpenAPI 规范自动生成 Zod Schema
实现 GraphQL + TypeScript：使用 Pothos 构建 code-first GraphQL API
写一个 TypeScript AST 工具：分析代码库中所有 any 的使用位置

TypeScript 5.8 · 全栈实战 · 2025