第1章：从零开始：搭建我们的博客项目

嗨，欢迎来到第一章！

在这个教程里，我们不会枯燥地学完所有TypeScript语法再做项目。相反，我们会直接动手——从零开始搭建一个博客系统，在实战中学习每一个知识点。

为什么是博客？

博客是一个完美的学习项目：

• 功能明确：文章的增删改查
• 涉及面广：类型定义、组件开发、API设计、数据库操作
• 可以扩展：评论、标签、搜索、用户系统
• 真实有用：完成后你可以真正使用它

为什么是TypeScript？

你可能听说过TypeScript，也可能犹豫过要不要学。让我告诉你：2025年，TypeScript已经是前端开发的标配了。

更重要的是，TypeScript正在成为AI Agent开发的首选语言：

• Vercel AI SDK：最流行的AI应用框架，完全用TypeScript
• LangChain.js：构建AI Agent的核心库
• Claude Code：Anthropic的AI编程工具
• Cursor、Windsurf：主流AI编程IDE

如果你想进入AI领域，TypeScript是必须掌握的技能。

简单来说，TypeScript就是带类型的JavaScript。

如果你学过JavaScript，你会发现TypeScript几乎一样——只是多了类型注解。如果你没学过JavaScript也没关系，我们会从头开始。

一个例子：

在JavaScript中，你可以这样写：

function add(a, b) {
  return a + b;
}

这看起来没问题，但如果有人这样调用：

add("1", 2)  // 结果是 "12"，不是 3！

JavaScript不会报错，但结果可能不是你想要的。

在TypeScript中：

function add(a: number, b: number): number {
  return a + b;
}

add("1", 2)  // 编译时报错！类型"string"不能赋值给"number"

TypeScript会在编译时就发现这个错误，而不是等到运行时。这就是类型安全的价值。

好了，理论讲够了，让我们开始动手吧！

我们需要安装：

1. Node.js - JavaScript运行环境

   • 访问 https://nodejs.org
   • 下载LTS（长期支持）版本
   • 安装时选择默认选项即可

2. VS Code - 代码编辑器（推荐）

   • 访问 https://code.visualstudio.com
   • 下载并安装
   • 它对TypeScript有完美的支持

3. TypeScript编译器 - 把TS代码转成JS

   • 安装完Node.js后，打开终端
   • 运行下面的命令

验证安装：

安装完成后，在终端中运行以下命令验证：

环境准备好了，让我们创建博客项目！

我们将使用Next.js框架，它是目前最流行的React框架，支持：

• 服务端渲染（SEO友好）
• API路由（前后端一体）
• TypeScript支持
• 简单的部署方式

创建项目的命令：

运行下面的命令，它会自动创建一个Next.js项目：

创建完成后，你会看到这样的目录结构：

my-blog/
├── app/              # 页面和布局
│   ├── layout.tsx    # 根布局
│   ├── page.tsx      # 首页
│   └── globals.css   # 全局样式
├── public/           # 静态资源
├── next.config.js    # Next.js配置
├── tsconfig.json     # TypeScript配置
└── package.json      # 项目配置

重要文件说明：

• app/page.tsx - 这是首页，我们的博客主页
• app/layout.tsx - 这是布局，所有页面共享的部分
• tsconfig.json - TypeScript配置，暂时不用改

现在，让我们打开 app/page.tsx，把里面的内容替换成我们的博客首页代码。

让我们看看这段代码做了什么：

1. 类型定义

interface Post {
  id: number;
  title: string;
  content: string;
  createdAt: Date;
}

这里我们定义了Post接口，描述了文章应该有哪些属性。TypeScript会确保我们的文章对象符合这个结构。

2. 数据

const posts: Post[] = [...]

我们创建了一些模拟数据。注意: Post[]表示这是一个Post类型的数组。

3. 组件

export default function Home() {
  return (...)
}

这是一个React组件，返回JSX（看起来像HTML的语法）。

运行看看：

保存文件后，浏览器会自动刷新，你应该能看到一个简单的博客首页！

太棒了！你已经成功：

1. ✅ 搭建了开发环境
2. ✅ 创建了博客项目
3. ✅ 编写了第一行TypeScript代码
4. ✅ 看到了TypeScript类型系统的威力

下一章预告：

在下一章中，我们会为博客添加更多的类型定义——文章状态、用户信息、标签系统。你会学到：

• 基础类型（string、number、boolean等）
• 数组和元组
• 类型推断
• 联合类型

让我们继续吧！