ImmerJS 中的 TypeScript 最佳实践指南

ImmerJS 中的 TypeScript 最佳实践指南

immer immerjs/immer: Immer 是一个用于不可变数据处理的 JavaScript 库，可以用于构建不可变数据结构和应用程序，支持多种编程语言和框架，如 JavaScript，TypeScript，React，Angular 等。 项目地址: https://gitcode.com/gh_mirrors/im/immer

前言

ImmerJS 是一个优秀的不可变状态管理库，它通过"草稿状态"的概念让开发者能够以可变的方式编写不可变逻辑。对于 TypeScript 用户来说，Immer 提供了出色的类型支持，本文将深入解析如何在 TypeScript 项目中高效使用 Immer。

类型系统集成

Immer 内置了完整的类型定义文件，无需额外配置即可与 TypeScript 无缝协作。其核心特性是能够自动处理 readonly 修饰符：

• 在 produce 回调外部，状态属性保持 readonly
• 在 produce 回调内部，草稿状态会自动移除 readonly 修饰符
• 最终返回的新状态会恢复所有 readonly 修饰符

这种设计完美实现了"仅在 produce 回调中可修改状态"的类型安全保证。

最佳实践

1. 全面使用 readonly

建议尽可能将状态类型标记为 readonly，这符合 Immer 的不可变理念：

interface State {
  readonly items: readonly string[];
  readonly count: number;
}

2. 使用 Immutable 工具类型

对于复杂嵌套结构，可以使用 Immutable 工具类型快速创建完全不可变的类型：

type ImmutableState = Immutable<State>;

3. 类型推断行为

Immer 的类型系统遵循以下原则：

• 如果输入状态是不可变的，输出状态也会保持不可变
• 如果输入状态是可变的，输出状态不会自动转为不可变

柯里化生产者的类型处理

自动类型推断

当柯里化生产者直接传递给其他函数时，类型可以完美推断：

const [state, setState] = useState<State>(initialState);

setState(produce(draft => {
  // draft 自动获得正确类型
}));

显式类型声明

对于独立定义的柯里化生产者，建议显式声明状态类型：

const toggleItem = produce<State>(draft => {
  // draft 自动推导为可写类型
});

带初始状态的柯里化

提供初始状态时，类型可以自动推断：

const adder = produce((draft, item: string) => {
  draft.items.push(item);
}, initialState);

带额外参数的柯里化

需要同时声明状态类型和参数类型：

const updater = produce<State, [number]>((draft, index) => {
  // 处理逻辑
});

类型转换工具

castDraft

当需要将不可变值赋给草稿时使用：

draft.items = castDraft(externalImmutableArray);

castImmutable

将可变值显式标记为不可变：

const immutableState = castImmutable(produce(mutableState, draft => {
  // 修改逻辑
}));

版本兼容性

• Immer v5.3+ 需要 TypeScript 3.7+
• Immer v3.0+ 需要 TypeScript 3.4+
• Immer v1.9+ 需要 TypeScript 3.1+

总结

Immer 的类型系统设计精妙，能够完美支持 TypeScript 的不可变编程模式。通过合理使用 readonly 修饰符、Immutable 工具类型以及类型转换工具，开发者可以在享受 Immer 便利性的同时，获得完整的类型安全保障。

immer immerjs/immer: Immer 是一个用于不可变数据处理的 JavaScript 库，可以用于构建不可变数据结构和应用程序，支持多种编程语言和框架，如 JavaScript，TypeScript，React，Angular 等。 项目地址: https://gitcode.com/gh_mirrors/im/immer