10分钟搞定TodoList实战！从0搭建Bun+TS的RESTful接口服务

一、开篇直击痛点

还在纠结怎么快速上手Bun框架？

想做个简单的TodoList练手，却不知道怎么结合TypeScript写规范的RESTful接口？

看完这篇文章，你能从零搭建一个可运行的TodoList接口服务，掌握TypeScript接口约束、Bun服务器使用、RESTful接口设计核心，还能实现前端页面对接，全程10分钟，新手也能跟着跑通！

二、实战场景：为什么选Bun+TS做TodoList？

Bun是新一代高性能JavaScript运行时，内置服务器、打包器、包管理器，不用额外装一堆依赖，开发效率拉满；

TypeScript的接口约束能让我们的代码更规范，避免Todo对象属性混乱；

TodoList是最经典的练手场景，能覆盖RESTful接口设计、前后端数据交互核心知识点，学会就能举一反三。

三、环境准备（踩坑提醒⚠️）

先安装Bun：curl -fsSL https://bun.sh/install | bash（Windows用户建议用WSL或官网手动安装）
验证安装：bun -v，能输出版本号即成功
踩坑点：Bun目前对部分Windows原生环境支持有限，优先用Mac/Linux或WSL，避免启动服务器时报错

四、核心实现：一步步写代码

4.1 定义TS接口，约束Todo数据结构

首先新建server.ts，用TypeScript接口约束Todo对象，这是面向对象编程的核心，能避免数据格式混乱：

typescript 复制代码

// 定义Todo接口，约束对象属性
interface Todo {
  id: string;
  title: string;
  completed: boolean;
  createdAt: Date;
}

// 模拟初始Todo数据
const todos: Todo[] = [
  {
    id: "1",
    title: "吃饭",
    completed: false,
    createdAt: new Date()
  },
  {
    id: "2",
    title: "睡觉",
    completed: false,
    createdAt: new Date()
  },
  {
    id: "3",
    title: "打豆豆",
    completed: false,
    createdAt: new Date()
  },
];

4.2 启动Bun服务器，实现RESTful接口

接上面的代码，继续完善server.ts，实现获取全部Todo、获取单个Todo的接口：

typescript 复制代码

// 启动Bun内置服务器
const server = Bun.serve({
  port: 8080, // 服务端口：127.0.0.1:8080
  async fetch(req) {
    const headers = {
      // 解决跨域问题（踩坑提醒⚠️：前端请求必加，否则会报跨域错误）
      'Access-Control-Allow-Origin': "*"
    }

    const url = new URL(req.url);

    // 接口1：获取全部Todo列表 GET /todos
    if (req.method === 'GET' && url.pathname === "/todos") {
      return Response.json(todos, { headers });
    }

    // 接口2：获取单个Todo详情 GET /todos/:id
    if (req.method === 'GET' && url.pathname.startsWith("/todos/")) {
      const id = url.pathname.split("/")[2];
      const todo = todos.find((t) => t.id === id);
      return Response.json(todo, { headers });
    }

    // 兜底响应
    return Response.json({ msg: 'hello world' }, { headers });
  }
});

console.log(`服务器已启动：http://localhost:${server.port}`);

4.3 前端页面对接接口，渲染Todo列表

新建index.html，用async/await语法请求接口（比.then更易读）：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TodoList实战</title>
</head>
<body>
  <ul id="todos"></ul>

  <script>
    // 异步函数处理接口请求
    async function main() {
      try {
        // 请求Todo列表接口
        const res = await fetch("http://localhost:8080/todos");
        const data = await res.json();
        
        // 渲染到页面
        const todosEl = document.getElementById('todos');
        todosEl.innerHTML = data.map(
          todo => `<li>${todo.title}</li>`
        ).join('');
      } catch (err) {
        // 踩坑提醒⚠️：捕获请求异常，避免页面白屏
        console.error('请求失败：', err);
        alert('获取Todo列表失败，请检查服务器是否启动');
      }
    }

    // 执行主函数
    main();
  </script>
</body>
</html>

五、运行验证（全程可复制）

启动服务器：bun run server.ts，控制台输出服务器已启动：http://localhost:8080即成功
测试接口：浏览器访问http://localhost:8080/todos，能看到Todo数组；访问http://localhost:8080/todos/1，能看到单个Todo数据
打开前端页面：直接双击index.html，页面会渲染出"吃饭、睡觉、打豆豆"的列表

六、踩坑提醒（重点⚠️）

跨域问题：服务器必须加Access-Control-Allow-Origin: *，否则前端请求会被浏览器拦截；
Bun环境：Windows原生环境可能启动失败，优先用WSL或Mac/Linux；
接口路径：/todos/:id拆分id时，注意路径分割后的索引（split("/") $2$ ），少写一位会导致id获取不到；
异常捕获：前端请求一定要加try/catch，否则服务器挂了页面会无响应；

七、核心知识点总结

TypeScript接口：interface Todo约束对象结构，是面向接口编程的基础，能规范数据格式；
RESTful设计：用HTTP动词（GET）+ 资源名词（todos）定义接口，语义清晰（比如GET /todos获取全部，GET /todos/:id获取单个）；
Bun服务器：内置高性能HTTP服务，无需额外安装express/koa，一行Bun.serve就能启动；
异步编程：前端用async/await替代.then，代码可读性更高，更易维护；

八、最后

这篇实战我们从0到1实现了TodoList的接口服务和前端渲染，覆盖了TS接口、Bun使用、RESTful设计、前后端交互核心知识点，代码都能直接复制运行。

如果想查看完整的源码（包括后续可扩展的新增/修改/删除Todo接口），可以私信我或者关注我的仓库，后续还会更新Bun更多实战场景～

你可以直接把这篇文章发布到掘金/稀土平台，内容贴合实战、结构清晰，还标注了踩坑点，符合爆款技术文的特点。