外观
TypeScript 实战学习项目 GitHub 地址
目标：整理适合用来实战学习 TypeScript 的 GitHub 项目地址，并给出学习重点、适合阶段和练习方式。
核对时间：2026-06-18。仓库地址通过搜索与 GitHub API 核验，star 数会随时间变化，学习价值不只看 star。
目录
1. 怎么用这份清单
不要把这些仓库当成“收藏夹”。更有效的方式是：
- 选一个与你当前水平匹配的项目。
- 先跑起来。
- 看
package.json、tsconfig.json、目录结构。 - 找 3 到 5 个核心文件精读。
- 复刻一个小功能。
- 改一个功能或修一个小问题。
- 总结这个项目里学到的 TypeScript 写法。
学习 TypeScript 不只是背语法。更重要的是看真实项目怎么处理：
- 类型定义。
- 泛型。
- 类型收窄。
- API 数据类型。
- 组件 props 类型。
- 服务端输入输出类型。
- monorepo 类型共享。
- 工具函数类型设计。
2. 入门练习类项目
这些项目更适合初学者从语法、类型推导、泛型、联合类型开始练。
| 阶段 | 仓库 | 地址 | 适合学习什么 |
|---|---|---|---|
| 入门 | total-typescript/beginners-typescript-tutorial | https://github.com/total-typescript/beginners-typescript-tutorial | TS 基础语法、类型标注、错误驱动学习 |
| 入门到中级 | typescript-exercises/typescript-exercises | https://github.com/typescript-exercises/typescript-exercises | 函数类型、对象类型、联合类型、类型收窄 |
| 类型进阶 | type-challenges/type-challenges | https://github.com/type-challenges/type-challenges | 泛型、条件类型、映射类型、递归类型 |
| 实战练习 | LearningTypeScript/projects | https://github.com/LearningTypeScript/projects | 小型真实项目练习，适合边做边学 |
2.1 total-typescript/beginners-typescript-tutorial
地址：
text
https://github.com/total-typescript/beginners-typescript-tutorial适合阶段：
- 刚学完 JavaScript。
- 知道 TypeScript 是什么，但写类型还不熟。
学习重点：
- 基础类型。
- 函数参数和返回值。
- 对象类型。
- 类型错误怎么读。
- 如何利用编辑器提示学习。
建议练法：
- 不要先看答案。
- 先根据报错自己改。
- 改完后解释“为什么这样写类型是对的”。
2.2 typescript-exercises/typescript-exercises
地址：
text
https://github.com/typescript-exercises/typescript-exercises适合阶段：
- 会写基础类型。
- 想通过题目巩固类型推导。
学习重点：
- interface 和 type 的使用。
- 联合类型。
- 类型保护。
- 函数重载。
- 泛型基础。
建议练法：
- 每天做 3 到 5 题。
- 做完后把错误原因写成笔记。
- 把相似题归类，例如“类型收窄类”“泛型类”“对象建模类”。
2.3 type-challenges/type-challenges
地址：
text
https://github.com/type-challenges/type-challenges适合阶段：
- 已掌握 TS 基础。
- 想深入类型系统。
学习重点：
- 条件类型。
- infer。
- 映射类型。
- 模板字面量类型。
- 递归类型。
- 类型层面的算法思维。
注意：
这个仓库不是业务项目，更像类型体操训练。它很适合提升类型系统理解，但不要误以为真实业务代码应该到处写复杂类型。
2.4 LearningTypeScript/projects
地址：
text
https://github.com/LearningTypeScript/projects适合阶段：
- 已经能看懂基础 TS。
- 想通过小项目练手。
学习重点：
- 真实项目中的类型组织。
- 小型项目任务拆解。
- 严格模式下的代码习惯。
建议练法：
- 每个项目先读 README。
- 再看测试或任务说明。
- 最后自己实现，不要直接照抄。
3. 中级应用架构项目
这些项目适合学习 TypeScript 在前端应用中的组织方式。
| 阶段 | 仓库 | 地址 | 适合学习什么 |
|---|---|---|---|
| 中级 | piotrwitek/react-redux-typescript-realworld-app | https://github.com/piotrwitek/react-redux-typescript-realworld-app | React、Redux、TS 结合的 RealWorld 应用 |
| 中级到高级 | alan2207/bulletproof-react | https://github.com/alan2207/bulletproof-react | 前端应用架构、目录分层、React + TS 工程实践 |
| 中级到高级 | vercel/commerce | https://github.com/vercel/commerce | Next.js 商城项目、组件组织、数据流 |
3.1 piotrwitek/react-redux-typescript-realworld-app
地址：
text
https://github.com/piotrwitek/react-redux-typescript-realworld-app适合学习：
- React 项目如何组织类型。
- Redux 状态类型。
- API 数据模型。
- RealWorld 标准业务场景。
建议练法：
- 先看登录、文章列表、文章详情。
- 找到 API 类型和状态类型。
- 尝试新增一个字段，例如文章阅读时间。
- 从接口类型、状态、组件 props 一路改通。
3.2 alan2207/bulletproof-react
地址：
text
https://github.com/alan2207/bulletproof-react适合学习：
- 大型前端项目目录分层。
- feature-based architecture。
- 组件、hooks、api、types 如何组织。
- React Query、表单、路由、权限等真实工程问题。
重点不是抄目录，而是理解为什么这样分层：
- 什么放
features。 - 什么放
components。 - 什么放
lib。 - API 类型在哪里定义。
- 页面如何组合 feature。
3.3 vercel/commerce
地址：
text
https://github.com/vercel/commerce适合学习：
- Next.js 项目结构。
- 商城业务组件设计。
- 服务端与客户端边界。
- 数据获取和 UI 组合。
建议练法：
- 先不要急着改所有代码。
- 选商品列表、商品详情、购物车其中一个模块精读。
- 画出数据从接口到页面的流向。
4. 全栈与真实产品项目
这些项目更大，更接近真实线上产品。适合已经具备一定项目经验后阅读。
| 阶段 | 仓库 | 地址 | 适合学习什么 |
|---|---|---|---|
| 全栈入门 | t3-oss/create-t3-app | https://github.com/t3-oss/create-t3-app | 类型安全全栈脚手架、Next.js、tRPC、Prisma |
| 高级应用 | dubinc/dub | https://github.com/dubinc/dub | SaaS 产品架构、链接管理、Next.js 全栈实践 |
| 高级应用 | calcom/cal.diy | https://github.com/calcom/cal.diy | 日程预约产品、复杂业务模型、全栈 TS |
| 高级应用 | excalidraw/excalidraw | https://github.com/excalidraw/excalidraw | 大型前端应用、画布交互、复杂状态管理 |
4.1 t3-oss/create-t3-app
地址：
text
https://github.com/t3-oss/create-t3-app适合学习：
- 类型安全全栈项目如何起步。
- 前端、后端、数据库之间如何共享类型。
- tRPC 这类端到端类型安全方案的思路。
建议练法：
- 先用脚手架创建一个小项目。
- 加一个 todo 表。
- 从数据库 schema 到 API 到页面全部用 TS 类型串起来。
4.2 dubinc/dub
地址：
text
https://github.com/dubinc/dub适合学习：
- 真实 SaaS 产品代码组织。
- Next.js App Router。
- 数据库模型。
- API 层。
- 权限和团队协作业务。
建议阅读顺序：
package.json。- 目录结构。
- 路由入口。
- 一个核心业务模块。
- 类型定义和数据库模型。
4.3 calcom/cal.diy
地址：
text
https://github.com/calcom/cal.diy适合学习：
- 复杂业务系统如何建模。
- 日程、用户、组织、集成服务之间的关系。
- 大型 monorepo 中类型如何组织。
注意：
这种项目不要一口气全读。选一个业务线，例如预约流程，沿着入口一步步看。
4.4 excalidraw/excalidraw
地址：
text
https://github.com/excalidraw/excalidraw适合学习：
- 复杂前端交互。
- Canvas 或绘图相关状态管理。
- 大型 TS 前端项目组织。
- 类型如何服务复杂 UI 状态。
建议练法：
- 先跑起来。
- 找一个小功能，例如工具栏按钮。
- 看这个按钮如何影响状态和渲染。
- 尝试新增一个小工具或修改一个快捷键。
5. 库与框架源码项目
这些项目适合深入 TypeScript、库设计和框架源码。
| 阶段 | 仓库 | 地址 | 适合学习什么 |
|---|---|---|---|
| 中级到高级 | colinhacks/zod | https://github.com/colinhacks/zod | 类型推导、schema validation、库 API 设计 |
| 高级 | nestjs/nest | https://github.com/nestjs/nest | Node.js 框架、装饰器、依赖注入、服务端架构 |
| 高级 | vuejs/core | https://github.com/vuejs/core | Vue 3 源码、响应式、编译器、运行时 |
| 高级 | vitejs/vite | https://github.com/vitejs/vite | 构建工具源码、插件机制、开发服务器 |
| 高级 | microsoft/TypeScript | https://github.com/microsoft/TypeScript | TS 编译器、类型系统、语言服务 |
5.1 colinhacks/zod
地址：
text
https://github.com/colinhacks/zod适合学习：
- 类型推导。
- 泛型 API 设计。
- 运行时校验和静态类型如何配合。
建议练法：
- 使用 Zod 写几个 schema。
- 再去源码里看这些 schema 的类型是怎么推出来的。
- 重点观察
infer、泛型参数、链式 API。
5.2 nestjs/nest
地址：
text
https://github.com/nestjs/nest适合学习：
- 服务端 TypeScript。
- 装饰器。
- 依赖注入。
- 模块化架构。
- 企业级 Node.js 项目组织。
建议练法：
- 先写一个 Nest 小项目。
- 再回来看源码。
- 不要直接从框架入口硬啃。
5.3 vuejs/core
地址：
text
https://github.com/vuejs/core适合学习：
- Vue 3 响应式系统。
- 运行时渲染。
- 编译器。
- monorepo 包结构。
建议阅读顺序：
packages/reactivity。packages/runtime-core。packages/runtime-dom。packages/compiler-core。
5.4 vitejs/vite
地址：
text
https://github.com/vitejs/vite适合学习：
- 开发服务器。
- 插件机制。
- 依赖预构建。
- Rollup 集成。
- 前端工具链源码组织。
建议练法：
- 先写一个 Vite 插件。
- 再去看 Vite 插件执行流程。
5.5 microsoft/TypeScript
地址：
text
https://github.com/microsoft/TypeScript适合学习：
- 编译器。
- AST。
- 类型检查器。
- 语言服务。
注意：
这是最高难度项目之一。初学者不建议直接读全仓库。可以从 issue、测试用例、语言服务小功能开始看。
6. 推荐实战路线
6.1 第一阶段：类型基础
推荐仓库：
- https://github.com/total-typescript/beginners-typescript-tutorial
- https://github.com/typescript-exercises/typescript-exercises
目标：
- 会看 TS 报错。
- 会写函数、对象、数组、联合类型。
- 会用泛型基础。
6.2 第二阶段：类型进阶
推荐仓库：
目标：
- 理解条件类型。
- 理解映射类型。
- 理解
infer。 - 能看懂复杂工具类型。
6.3 第三阶段：小项目实战
推荐仓库：
- https://github.com/LearningTypeScript/projects
- https://github.com/piotrwitek/react-redux-typescript-realworld-app
目标：
- 能把类型用于真实业务。
- 会设计 API 返回值类型。
- 会设计组件 props 类型。
- 会处理异步数据类型。
6.4 第四阶段：真实产品架构
推荐仓库：
- https://github.com/alan2207/bulletproof-react
- https://github.com/t3-oss/create-t3-app
- https://github.com/dubinc/dub
目标：
- 理解大型项目目录组织。
- 理解全栈类型共享。
- 理解真实业务中的类型边界。
6.5 第五阶段：框架和工具源码
推荐仓库：
- https://github.com/colinhacks/zod
- https://github.com/vitejs/vite
- https://github.com/vuejs/core
- https://github.com/microsoft/TypeScript
目标：
- 学习库 API 类型设计。
- 学习框架源码组织。
- 学习工具链和编译器思路。
7. 阅读开源 TS 项目的方法
7.1 先看 package.json
重点看：
- scripts。
- dependencies。
- devDependencies。
- package manager。
- module type。
- exports。
这能帮你判断项目技术栈。
7.2 再看 tsconfig.json
重点看：
strict是否开启。target。module。moduleResolution。paths。types。
tsconfig 经常能反映项目类型规范的严格程度。
7.3 画出入口链路
不要随机打开文件。
按下面顺序找：
- 应用入口。
- 路由入口。
- 页面入口。
- API 调用。
- 类型定义。
- 状态管理。
7.4 选一个功能纵向读透
例如登录功能：
- 登录页面在哪里。
- 表单类型怎么定义。
- API 请求参数是什么类型。
- 返回值是什么类型。
- token 存在哪里。
- 用户信息类型怎么传递。
这样比横向扫完整个仓库更有效。
7.5 复刻比阅读更重要
读完后做一个小练习：
- 复刻一个组件。
- 复刻一个 API 封装。
- 复刻一个类型工具。
- 给项目加一个字段。
- 给项目加一个小页面。
只有自己改过，类型错误才会真正变成经验。
附：本清单中的仓库地址汇总
text
https://github.com/total-typescript/beginners-typescript-tutorial
https://github.com/typescript-exercises/typescript-exercises
https://github.com/type-challenges/type-challenges
https://github.com/LearningTypeScript/projects
https://github.com/piotrwitek/react-redux-typescript-realworld-app
https://github.com/alan2207/bulletproof-react
https://github.com/vercel/commerce
https://github.com/t3-oss/create-t3-app
https://github.com/dubinc/dub
https://github.com/calcom/cal.diy
https://github.com/excalidraw/excalidraw
https://github.com/colinhacks/zod
https://github.com/nestjs/nest
https://github.com/vuejs/core
https://github.com/vitejs/vite
https://github.com/microsoft/TypeScript