FlowType为何对我的Reducer中数组定义报错？

问题描述 #

我定义了如下学生对象类型：

type PupilType = {
  classId: string,
  created: number,
  description: string,
  firstname: string,
  gender: string,
  id: string,
  lastname: string,
  updated: number,
};

我的学生Redux reducer中将学生数据存储在数组中，当我将state类型定义为Array<Object> = []时代码可正常运行，但尝试使用PupilType指定数组类型时，FlowType出现报错，请问这是什么原因？

原因分析与解决方案 #

这其实是FlowType严格类型校验特性导致的——Array<Object>是一个非常宽松的类型，它只约束数组元素是对象，但不会检查对象的具体结构；而当你换成自定义的PupilType数组时，Flow会严格校验每个数组元素的结构和字段类型，一旦有不符合的地方就会报错。具体可能的原因有以下几种：

1. 数组类型的声明语法错误
   Flow中声明自定义类型的数组有两种正确方式：Array<PupilType> 或者 PupilType[]。如果你写错了语法（比如写成PupilType Array或者其他错误形式），Flow会无法识别这个类型，直接抛出报错。

正确的State类型声明示例：

// 两种写法都可以
type PupilsState = Array<PupilType>;
// 或者
type PupilsState = PupilType[];

// 在reducer中使用
const pupilsReducer = (state: PupilsState = [], action) => {
  // ... reducer逻辑
};

2. 实际State中的数据不符合PupilType的约束
   当你用Array<Object>时，Flow不会检查每个学生对象的字段是否完整、类型是否匹配。但换成PupilType数组后，Flow会逐个校验：

• 是否缺少classId/created等必填字段
• 字段类型是否匹配（比如created是否是number类型，而不是字符串）
• 是否存在PupilType中未定义的额外字段（如果Flow开启了严格对象检查的话）

举个例子，如果你的state里有一个学生对象的created字段是字符串"20240101"而不是数字，用Array<Object>不会报错，但用Array<PupilType>就会触发类型不匹配的错误。

3. Reducer中的状态更新逻辑生成了不符合类型的对象
   在reducer处理ADD_PUPIL或UPDATE_PUPIL这类action时，如果生成的新学生对象没有完全符合PupilType的结构，Flow也会报错。比如添加学生时遗漏了updated字段，或者给gender传了一个布尔值而不是字符串。

比如下面的错误示例：

case 'ADD_PUPIL':
  // 错误：缺少updated字段，且gender是布尔值
  return [...state, {
    classId: '101',
    created: Date.now(),
    description: '',
    firstname: 'John',
    gender: true, // 应该是string类型
    id: 'p1',
    lastname: 'Doe'
    // 缺少updated字段
  }];

4. PupilType的作用域或导入问题
   如果PupilType是在其他文件中定义的，你需要确保已经正确导入到reducer文件中，并且作用域正确。如果Flow找不到PupilType的定义，也会抛出类型错误。

排查建议 #

1. 先检查数组类型的声明语法是否正确，确保用的是Array<PupilType>或PupilType[]
2. 打印当前的state数据，逐个检查每个学生对象是否完全符合PupilType的字段和类型要求
3. 检查reducer中所有修改state的逻辑，确保生成的新对象都满足PupilType的约束
4. 确认PupilType的定义在当前文件中可访问（如果是外部定义的，检查导入语句）

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