获课：xingkeit.top/5263/

React Hooks 结合 TypeScript：自定义旅游业务通用钩子函数

旅游商城的前端开发，最大的痛点不是页面多，是逻辑复用难。城市选择、日期区间、目的地筛选、购物车状态——这些逻辑散落在各个组件里，重复代码堆成山。React Hooks 解决了逻辑复用问题，TypeScript 解决了类型安全问题，两者结合写出来的自定义钩子，才是旅游业务真正能复用的武器。

一、为什么旅游业务特别适合抽钩子

旅游商城有个明显特征：业务逻辑跟 UI 无关，但跟数据强相关。 选了北京，出发日期自动限制在未来30天内；加了购物车，底部导航的角标数字自动更新；搜索目的地时，防抖处理搜索词。这些逻辑不依赖任何具体组件，抽成钩子后可以在任何页面复用。

TypeScript 在这里的价值不是"加了类型更安全"这种空话，而是钩子的参数和返回值一旦定义清楚，调用方根本不会用错。比如一个日期区间钩子，返回值明确标注 startDate: Date | null，调用方就不可能传字符串进去。

二、五个旅游业务高频通用钩子

第一个：城市选择钩子。 旅游商城几乎每个页面都有城市选择器。这个钩子内部维护选中的城市 ID 和城市名称，提供选择、清空、切换三个方法。返回值用联合类型标注当前城市可能为空的情况，调用方必须处理空值，从根本上杜绝"未选城市就提交订单"的 bug。

第二个：日期区间钩子。 出发日期和返回日期是强关联的——返回日期必须大于出发日期。这个钩子在内部做约束校验，返回两个日期和一个是否合法的布尔值。用 TypeScript 泛型限定日期格式，确保传入传出的日期类型一致。

第三个：目的地搜索钩子。 搜索词加防抖是标配，但旅游业务还要加一层：搜索结果要按城市分组。钩子返回搜索词、结果列表、加载状态、是否有更多数据四个值，全部带类型定义。调用方拿到的数据结构一目了然，不用猜。

第四个：购物车状态钩子。 购物车逻辑跨页面——列表页能加、详情页能加、结算页能删。这个钩子用 Context 思路但不依赖 Context，直接用 useState 加 useCallback 封装，返回商品列表、总价、增减方法。总价用 number 类型而不是 string，杜绝了"199.990000001"这种显示事故。

第五个：滚动加载钩子。 旅游商城的目的地列表、攻略列表都是无限滚动。这个钩子监听滚动位置，触发加载更多，同时维护加载状态和是否还有更多数据。返回值用元组标注 [data, loading, hasMore]，调用方解构时 TypeScript 会强制检查每个值是否处理。

三、TypeScript 让钩子从"能用"变"不会用错"

普通 JavaScript 写钩子，参数传什么全靠注释，返回值是什么全靠猜。TypeScript 写钩子，签名即文档。

比如日期区间钩子的签名：function useDateRange(initialDays?: number): { start: Date | null; end: Date | null; isValid: boolean; setRange: (s: Date, e: Date) => void }。这一行读完，怎么用、返回什么、有什么约束，全部清楚。

再比如城市钩子用泛型：function useCity<T extends string>(): { city: T | null; select: (id: T) => void; clear: () => void }。泛型让调用方可以指定城市 ID 的具体类型，是数字还是字符串，编译期就锁死，运行期不会出现类型混乱。

四、一句话总结

Hooks 解决旅游业务逻辑复用的问题，TypeScript 解决复用后类型失控的问题。五个高频钩子覆盖选城、选日期、搜索、购物车、滚动加载，每个签名即文档，调用即约束。旅游商城的前端一旦建立起这套钩子体系，新页面开发速度能提升一倍，线上类型相关的 bug 几乎清零。