2026 TypeScript 全栈学习路径

适用读者：有 JavaScript 基础，希望系统掌握 TypeScript 全栈开发的工程师。
预计学习周期：8–12 周（业余）· 含阶段验收项目

学习目标

完成本学习路径后，你将能够：

1. 熟练运用 TypeScript 5.x 高级类型（泛型、条件类型、模板字面量类型）
2. 使用 Node.js + Fastify/Hono 构建类型安全的 REST API
3. 掌握 Prisma/Drizzle ORM 进行数据库建模与迁移
4. 用 Nuxt 3 构建 SSR/SSG 全栈应用并部署到生产
5. 建立从需求到上线的完整全栈工程化工作流

前置知识

• HTML、CSS、JavaScript ES6+ 基础
• 了解 HTTP 协议与 REST 基本概念
• 熟悉命令行与 Git 基本操作
• 有任意一门编程语言经验更佳

---

阶段一：TypeScript 类型系统夯实（第 1–2 周）

1.1 环境搭建

npm install -g typescript
tsc --init
# 推荐 tsconfig 基线

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "verbatimModuleSyntax": true
  }
}

开启 strict 和 noUncheckedIndexedAccess 是从「能跑」到「可靠」的分水岭。

1.2 核心概念清单

基础类型与类型收窄：

function formatId(id: string | number): string {
  if (typeof id === 'number') {
    return id.toFixed(0);
  }
  return id.trim();
}

接口与类型别名：

interface User {
  readonly id: string;
  name: string;
  email?: string;
  roles: readonly Role[];
}

type Role = 'admin' | 'editor' | 'viewer';
type UserDTO = Pick<User, 'id' | 'name'>;

泛型实战：

interface ApiResponse<T> {
  data: T;
  meta: { page: number; total: number };
}

async function fetchPage<T>(url: string): Promise<ApiResponse<T>> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json() as Promise<ApiResponse<T>>;
}

1.3 高级类型（第 2 周重点）

// 条件类型
type IsString<T> = T extends string ? true : false;

// 模板字面量类型
type EventName = `on${Capitalize<'click' | 'focus'>}`;
// 'onClick' | 'onFocus'

// satisfies 运算符（TS 5.0+）
const config = {
  port: 3000,
  host: 'localhost',
} satisfies Record<string, string | number>;

1.4 阶段验收

完成一个 类型安全的表单验证库（不使用 zod，纯 TS 实现），要求：

• 用泛型约束表单字段类型
• 错误信息类型与字段一一对应
• 通过 tsc --noEmit 零错误

---

阶段二：Node.js 后端开发（第 3–4 周）

2.1 框架选择

2026 年推荐：

框架	特点	适用
Hono	极轻量、Edge 友好	微服务、Serverless
Fastify	高性能、插件生态	中大型 API
NestJS	企业级、装饰器	复杂业务系统

入门推荐 Hono：

npm create hono@latest my-api
cd my-api && npm install

import { Hono } from 'hono';
import { zValidator } from '@hono/zod-validator';
import { z } from 'zod';

const app = new Hono();

const createUserSchema = z.object({
  name: z.string().min(1).max(50),
  email: z.string().email(),
});

app.post('/users', zValidator('json', createUserSchema), async (c) => {
  const body = c.req.valid('json');
  const user = await userService.create(body);
  return c.json(user, 201);
});

export default app;

2.2 数据库与 ORM

推荐 Drizzle ORM（轻量、类型推断优秀）：

import { pgTable, serial, text, timestamp } from 'drizzle-orm/pg-core';

export const users = pgTable('users', {
  id: serial('id').primaryKey(),
  name: text('name').notNull(),
  email: text('email').notNull().unique(),
  createdAt: timestamp('created_at').defaultNow(),
});

npx drizzle-kit generate
npx drizzle-kit migrate

2.3 认证与中间件

import { jwt } from 'hono/jwt';

app.use('/api/*', async (c, next) => {
  const token = c.req.header('Authorization')?.replace('Bearer ', '');
  if (!token) return c.json({ error: 'Unauthorized' }, 401);
  const payload = await jwt.verify(token, process.env.JWT_SECRET!);
  c.set('userId', payload.sub);
  await next();
});

2.4 阶段验收

构建一个 博客 API：

• CRUD：文章、分类、标签
• JWT 认证
• 分页、搜索
• OpenAPI 文档（@hono/zod-openapi）
• 单元测试覆盖率 > 70%

---

阶段三：Nuxt 3 全栈前端（第 5–7 周）

3.1 项目初始化

npx nuxi@latest init my-blog-frontend
cd my-blog-frontend
npm install

目录结构：

app/
  pages/          # 文件路由
  components/     # 组件
  composables/    # 组合式函数
  server/         # 服务端 API（可选 BFF）
server/
  api/            # Nitro 服务端路由
nuxt.config.ts

3.2 数据获取模式

// composables/usePosts.ts
export function usePosts(page = 1) {
  return useFetch('/api/posts', {
    query: { page },
    key: `posts-${page}`,
  });
}

<script setup lang="ts">
const route = useRoute();
const page = computed(() => Number(route.query.page ?? 1));
const { data, pending, error } = await usePosts(page.value);
</script>

3.3 SSR 与 SEO

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true,
  app: {
    head: {
      titleTemplate: '%s | 我的博客',
    },
  },
  runtimeConfig: {
    apiSecret: '',
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || 'http://localhost:3001',
    },
  },
});

<script setup lang="ts">
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);

useSeoMeta({
  title: () => post.value?.title,
  description: () => post.value?.summary,
  ogImage: () => post.value?.cover,
});
</script>

3.4 阶段验收

用 Nuxt 3 实现博客前端：

• 首页、文章详情、分类页 SSR
• 对接阶段二的 API
• 响应式布局
• Lighthouse Performance > 85

---

阶段四：工程化与部署（第 8–9 周）

4.1 Monorepo 组织

my-fullstack/
  packages/
    api/          # Hono 后端
    web/          # Nuxt 前端
    shared/       # 共享类型
  pnpm-workspace.yaml

# pnpm-workspace.yaml
packages:
  - 'packages/*'

共享类型：

// packages/shared/src/types.ts
export interface Post {
  id: string;
  title: string;
  slug: string;
  content: string;
  publishedAt: string;
}

4.2 CI/CD

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - run: pnpm install --frozen-lockfile
      - run: pnpm -r run lint
      - run: pnpm -r run test
      - run: pnpm -r run build

4.3 部署方案

组件	推荐平台
Nuxt SSR	Vercel / 自建 Node
Hono API	Railway / Fly.io / Docker
PostgreSQL	Supabase / Neon / 自建

4.4 阶段验收

将博客全栈项目部署到生产环境，配置自定义域名与 HTTPS。

---

阶段五：进阶专题（第 10–12 周，选修）

• tRPC / oRPC：端到端类型安全 RPC
• Effect-TS：函数式错误处理
• Bun：运行时替代方案
• Turborepo：构建缓存优化
• E2E 测试：Playwright + Nuxt

---

练习 / 作业

1. 用 TypeScript 实现一个 Result<T, E> 类型，支持 map、flatMap、unwrapOr。
2. 为 Hono API 编写 OpenAPI spec 并用 Scalar 渲染文档页。
3. 在 Nuxt 3 中实现 ISR（增量静态再生）文章页。
4. 毕业项目：自选主题完成全栈应用（至少 3 个实体、认证、部署上线），撰写技术博客记录踩坑。

---

FAQ

Q：TypeScript 和 JavaScript 应该先学哪个？

A：直接学 TypeScript。2026 年新项目几乎默认 TS，边学边用效率最高。

Q：Nuxt 3 和 Next.js 怎么选？

A：Vue 生态选 Nuxt，React 生态选 Next。若团队已有 Vue 经验，Nuxt 3 的 DX 非常出色。

Q：需要学 Decorator 吗？

A：除非用 NestJS，否则优先函数式风格。TS 5.x 的 Decorator 仍是实验特性。

Q：全栈一定要会 DevOps 吗？

A：至少要会 Docker Compose 部署和基本 CI。深入 K8s 可后续学习。

Q：学习路径如何检验效果？

A：每个阶段的验收项目是关键。能独立完成并部署，比看完教程更有说服力。

---

小结

2026 年 TypeScript 全栈的黄金组合是：TypeScript 5.x + Hono/Fastify + Drizzle + Nuxt 3 + pnpm Monorepo。按五个阶段循序渐进，每周投入 10–15 小时，约 3 个月可具备独立交付全栈项目的能力。核心原则：类型安全贯穿前后端、每个阶段用项目验收、尽早部署到真实环境。