Flow类型检查含动态访问器的动态对象时出现误报问题

我懂你遇到的问题了！这其实是Flow处理计算属性名的机制导致的：当你用一个动态字符串变量（不是直接写死的字符串字面量）作为对象属性名时，Flow默认不会对该属性的值做严格类型校验——因为它没法提前确定这个变量在运行时会对应哪些具体属性，所以暂时放宽了检查规则。

几个解决办法 #

1. 直接用字符串字面量定义属性

如果属性名是固定的，别用变量，直接写字面量，Flow马上就能揪出类型不匹配：

// @flow
type DynamicStructure = { [string]: number }
const someStructure: DynamicStructure = { "someKey": "invalid, should be a number" }
// 此时Flow会报错：字符串不能赋值给number类型的属性

2. 给属性名变量加上字面量类型约束

如果必须用变量当属性名，把变量的类型从string改成具体的字面量类型，让Flow明确知道这个变量对应的是哪个属性：

// @flow
type DynamicStructure = { [string]: number }
const key: "someKey" = "someKey" // 这里把类型限定为字面量"someKey"
const someStructure: DynamicStructure = { [key]: "invalid, should be a number" }
// 现在Flow会正确报错：string类型不能赋值给number类型的属性[key]

3. 用精确对象类型替代动态索引

如果你的对象结构是固定的，完全没必要用动态索引类型，直接定义精确的属性结构，不管怎么赋值Flow都会严格检查：

// @flow
type ExactStructure = { someKey: number }
const key: string = "someKey"
const someStructure: ExactStructure = { [key]: "invalid, should be a number" }
// Flow会报错：属性对应的值类型不匹配

这样调整后，Flow就能按照你的预期检测到类型错误啦。

内容的提问来源于stack exchange，提问作者Augusto Altman Quaranta