在React/Redux中不使用类，如何优化TypeScript状态类型与初始值？

针对你提到的「用interface/type需要重复编写初始化代码，类又不适合Redux」的问题，这里有几个实用的方案，既能兼顾类型安全，又能避免重复代码：

1. 工厂函数 + 自动类型推导 #

把默认值和类型定义放在同一文件里，用ReturnType自动推导类型，无需手动编写interface：

// counterState.ts
export const createCounterState = () => ({
  value: 0,
  countHistory: [] as number[],
  isActive: false
});

// 自动推导类型，不用手动写interface
export type CounterState = ReturnType<typeof createCounterState>;

在slice里直接调用工厂函数初始化：

import { createCounterState, CounterState } from './counterState';

const counterSlice = createSlice({
  name: 'counter',
  initialState: createCounterState(),
  reducers: {
    increment: (state) => { state.value += 1 }
  }
});

如果需要支持自定义初始值，还可以给工厂函数加参数：

export const createCounterState = (overrides?: Partial<CounterState>) => ({
  value: 0,
  countHistory: [] as number[],
  isActive: false,
  ...overrides
});

2. Schema库（如Zod）：类型+校验+默认值一体化 #

对于复杂领域对象，用Zod这类Schema库可以同时实现类型定义、默认值设置和运行时校验，适合大型项目：

import { z } from 'zod';

// 定义Schema，同时指定类型和默认值
const CounterStateSchema = z.object({
  value: z.number().default(0),
  countHistory: z.array(z.number()).default([]),
  isActive: z.boolean().default(false)
});

// 自动推导TypeScript类型
export type CounterState = z.infer<typeof CounterStateSchema>;

初始化时直接用Schema生成默认值：

const counterSlice = createSlice({
  name: 'counter',
  initialState: CounterStateSchema.parse({}), // 或直接用CounterStateSchema.default()
  reducers: { /* ... */ }
});

为什么不推荐在Redux里用类？ #

Redux的核心要求是状态必须是不可变的普通JS对象/数组/原始值，类实例存在几个问题：

• 类实例带引用关系，序列化（比如存localStorage）会丢失原型链，无法正常恢复
• Immer（Redux Toolkit内置的不可变更新工具）对普通对象的支持更友好，类实例的更新需要额外处理
• 类的方法可能带来副作用，不符合Redux状态纯数据的设计原则

总结 #

• 小型项目/简单状态：优先用「工厂函数+自动类型推导」，代码简洁且无冗余
• 中型项目/需要自定义初始值：用「工厂函数+Partial合并」，兼顾灵活性
• 大型项目/复杂领域对象：用Zod等Schema库，同时获得类型安全、默认值和运行时校验

内容的提问来源于stack exchange，提问作者bizon