深入理解 Immer 中的 TypeScript 类型系统-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01186/article/details/148360611

深入理解 Immer 中的 TypeScript 类型系统

immer 项目地址: https://gitcode.com/gh_mirrors/imm/immer

Immer 是一个优秀的不可变状态管理库，它通过代理模式让我们能够以可变的方式编写不可变逻辑。本文将重点探讨 Immer 与 TypeScript 的深度集成，帮助开发者更好地利用类型系统来保证代码的安全性和可维护性。

类型定义自动集成

Immer 内置了完整的类型定义文件，这意味着：

无需额外安装类型定义包
TypeScript 和 Flow 开箱即用
类型系统会自动识别 Immer 的各种 API

类型系统的一个关键特性是会自动移除 readonly 修饰符，使得在 produce 回调中能够修改状态，同时保持外部状态的不可变性。这种设计完美体现了 Immer 的核心思想：内部可变，外部不可变。

不可变状态的最佳实践

为了充分发挥 TypeScript 和 Immer 的优势，建议遵循以下最佳实践：

尽可能使用 readonly：这符合 Immer 冻结所有返回值的实际行为
利用 Immutable 工具类型：可以递归地将整个类型树设为只读
注意类型推断边界：Immer 不会自动包装返回类型，除非原始输入状态是不可变的

柯里化生产者的类型技巧

Immer 的柯里化生产者（curried producers）具有强大的类型推断能力：

直接传递时自动推断：当柯里化生产者直接传递给其他函数（如 React 的 setState）时，类型可以完美推断
独立定义时显式声明：当柯里化生产者独立定义时，建议使用泛型明确指定状态类型
初始状态辅助推断：如果提供了初始状态，类型系统可以自动推断，无需额外注解

对于带有额外参数的柯里化生产者，需要以元组形式明确声明参数类型：

const updater = produce<Todo, [string]>((draft, newTitle) => {
  draft.title = newTitle
})

类型转换工具

Immer 提供了两个实用的类型转换工具：

castDraft：将不可变类型转换为可变类型，用于在 produce 回调中解决类型冲突
castImmutable：将可变类型显式标记为不可变，即使原始状态是可变的

这些工具在实际运行时不会有任何操作，纯粹是类型层面的辅助。

版本兼容性说明

不同版本的 Immer 对 TypeScript 的支持情况：

v5.3+ 需要 TypeScript v3.7+
v3.0+ 需要 TypeScript v3.4+
v1.9+ 需要 TypeScript v3.1+

实际应用示例

让我们看一个更完整的示例，展示如何在 React 项目中结合使用 Immer 和 TypeScript：

interface UserProfile {
  readonly id: string
  readonly name: string
  readonly preferences: {
    readonly theme: 'light' | 'dark'
    readonly notifications: boolean
  }
}

const [profile, setProfile] = useState<UserProfile>({
  id: '123',
  name: 'John Doe',
  preferences: {
    theme: 'light',
    notifications: true
  }
})

// 更新用户偏好
const updatePreferences = (updater: (draft: Draft<UserProfile['preferences']>) => void) => {
  setProfile(produce(draft => {
    updater(draft.preferences)
  }))
}

// 使用示例
updatePreferences(draft => {
  draft.theme = 'dark'
  draft.notifications = false
})

这个示例展示了如何：