TypeScript 实战积累 · 从业务类型到踩坑笔记
将多年 TypeScript 学习积累的笔记与练习开源沉淀。涵盖业务场景类型设计、常用工具类型实战、设计模式的 TS 实现、进阶技巧沉淀以及常见踩坑记录，共 32 个 Demo，每个 Demo 以 HTML 页面形式展示代码、类型推导说明与使用场景，并附带 TypeScript Playground 链接便于在线运行。
- 业务类型封装 - 统一 API 响应、分页、表单、事件总线等真实业务场景的类型设计
- 工具类型实战 - 内置工具类型速查、泛型约束、条件类型等日常开发必备
- 设计模式 TS 实现 - 单例、工厂、观察者、策略模式的类型安全实现
- 进阶技巧沉淀 - 类型守卫、类型收窄、第三方库类型声明等实用技巧
- 踩坑记录 - 可选属性、数组推断、Object.keys 等容易踩坑的类型问题
- Playground 即点即跑 - 每个 Demo 附带 TypeScript Playground 链接
- 零依赖纯静态 - 纯 HTML/CSS，无构建工具，无外部 CDN
| 模块 | 目录 | 说明 | Demo 数量 |
|---|---|---|---|
| 业务类型 | business/ | API 响应、分页、表单、事件总线、校验规则、表格列、字典、请求配置、路由配置 | 9 |
| 工具类型 | utilities/ | 内置工具类型速查、泛型约束、条件类型、类型合并、按 Key 精细控制 | 8 |
| 设计模式 | patterns/ | 单例、工厂、观察者、策略模式 | 4 |
| 进阶技巧 | tricks/ | 类型守卫、类型收窄、any/unknown/never、第三方库声明、satisfies、const 断言 | 6 |
| 踩坑记录 | pitfalls/ | 可选属性、数组推断、Object.keys、泛型推断、全局声明污染 | 5 |
wjs-ts-practice/
├── index.html # 导航首页
├── utilities/ # 工具类型
│ ├── builtin-tools.html # 内置工具类型速查
│ ├── valueof-keyof.html # ValueOf 与 KeyOf
│ ├── merge-overwrite.html # Merge 与 Overwrite 类型合并
│ ├── generic-constraints.html # 泛型约束详解
│ ├── conditional-basics.html # 条件类型基础
│ ├── deep-required.html # DeepRequired 深度必填
│ ├── partial-by-keys.html # PartialByKeys 按 key 设可选
│ └── required-by-keys.html # RequiredByKeys 按 key 设必填
├── business/ # 业务类型
│ ├── api-response.html # 统一 API 响应类型
│ ├── pagination.html # 分页类型封装
│ ├── form-schema.html # 表单 Schema 类型
│ ├── event-bus.html # 事件总线类型
│ ├── form-validation.html # 表单校验规则类型
│ ├── table-column.html # 表格列定义类型
│ ├── dictionary.html # 字典/枚举类型封装
│ ├── request-config.html # 请求配置类型封装
│ └── route-config.html # 路由配置类型
├── patterns/ # 设计模式 TS 实现
│ ├── singleton.html # 单例模式
│ ├── factory.html # 工厂模式
│ ├── observer.html # 观察者模式
│ └── strategy-pattern.html # 策略模式
├── tricks/ # TS 技巧
│ ├── type-guard.html # 类型守卫（is 关键字）
│ ├── type-narrowing-ways.html # 类型收窄的 5 种方式
│ ├── any-unknown-never.html # any / unknown / never 的区别
│ ├── declare-module.html # 给第三方库补类型声明
│ ├── satisfies-operator.html # satisfies 操作符
│ └── const-assertion.html # const 断言技巧
├── pitfalls/ # 踩坑记录
│ ├── optional-vs-undefined.html # 可选属性 ?: vs | undefined
│ ├── array-inference.html # 数组类型推断的坑
│ ├── object-keys.html # Object.keys() 的类型问题
│ ├── generic-inference.html # 泛型推断失败的常见原因
│ └── global-declaration.html # 全局类型声明污染
├── LICENSE # MIT
└── README.md # 项目说明
直接访问 GitHub Pages 站点 浏览所有 Demo，点击卡片进入对应页面查看代码与说明。
由于是纯静态 HTML，克隆后直接用浏览器打开 index.html 即可：
git clone https://github.com/wjs-tech/wjs-ts-practice.git
cd wjs-ts-practice
# 直接用浏览器打开 index.html，或启动本地服务器
npx serve .每个 Demo 页面都有完整的 TS 代码块，可直接复制到 TypeScript 项目中使用。点击页面底部"在 Playground 中尝试"按钮可跳转到 TypeScript Playground 在线运行验证类型推导。
| 阶段 | 重点内容 | 对应模块 |
|---|---|---|
| 基础 | 类型守卫、类型收窄、any/unknown/never、内置工具类型 | tricks/、utilities/builtin-tools |
| 进阶 | 泛型约束、条件类型、类型合并、第三方库声明 | utilities/、tricks/declare-module |
| 实战 | 业务类型设计、设计模式类型约束 | business/、patterns/ |
| 避坑 | 常见类型陷阱与解决方案 | pitfalls/* |
- TypeScript 5.x - 类型系统核心
- HTML5 / CSS3 - 静态页面展示
- TypeScript Playground - 在线运行环境
- GitHub Pages - 静态托管
MIT © wjs (王金盛) 2021-2026