记录 React + TypeScript 的每一行代码

一个专注于前端工程化的个人博客 · 类型安全,从组件开始

36篇文章
React 19同步跟进
100%TypeScript 覆盖
📝 最新文章
React 19Hooks 2026-08-28· 阅读约 8 分钟

useOptimistic 实战:让列表交互零延迟

乐观更新不再需要手写回滚逻辑。本文通过一个待办事项 Demo,演示如何在并发渲染下安全地使用 useOptimistic,并配合 useTransition 处理失败回退。

TypeScript泛型 2026-08-15· 阅读约 12 分钟

从泛型组件到类型推断:告别 any 的三种姿势

从 <T extends unknown> 聊到 satisfies 操作符,结合真实表单组件的演进过程,展示如何让 Props、Ref、事件处理器全部获得完整类型提示。

工程化Vite 2026-07-30· 阅读约 6 分钟

用 Module Resolution bundler 消灭路径别名报错

tsconfig 里的 paths、Vite 的 alias、测试框架的 resolver 三处配置如何保持一致?一篇讲清 moduleResolution 的前世今生。

状态管理Zustand 2026-07-12· 阅读约 10 分钟

Redux vs Zustand:中型项目的选型思考

样板代码、包体积、DevTools、TypeScript 友好度四个维度横向对比,附迁移脚手架与踩坑记录。

💻 本周代码片段
useToggle.ts
// 一个类型安全的 useToggle Hook
import { useCallback, useState } from "react";

type Toggle = [boolean, () => void, (v: boolean) => void];

export function useToggle(initial = false): Toggle {
  const [on, setOn] = useState(initial);
  const toggle = useCallback(() => setOn(v => !v), []);
  const set = useCallback((v: boolean) => setOn(v), []);
  return [on, toggle, set];
}
👋 关于我

前端开发者,白天写业务,晚上写博客。热衷于用 TypeScript 把运行时错误消灭在编译期, 相信「类型是最好的文档」。目前正在深挖 React Server Components 与 Tauri 桌面端开发。 如果你也是类型安全的信徒,欢迎交流 👉 hello@example.com