流 - 无法获取 action.index，因为缺少属性索引答案

【问题标题】：Flow - Cannot get action.index because property index is missing流 - 无法获取 action.index，因为缺少属性索引
【发布时间】：2019-07-05 19:41:43
【问题描述】：

我有以下代码：

src\types.js

export type TLoadIndex = { type: string, index: number }
export type TLoadAll = { type: string }
export type TDeleteAll = { type: string }
export type TAction = TLoadIndex | TLoadAll | TDeleteAll;

export type TPlane = {
    title?: string,
    caption?: string,
    text?: string,
    image: string,
};

src\store\plane\reducer.js

import planeList from './planeList';
import { LOAD_INDEX, LOAD_ALL, DELETE_ALL } from './actions';
import type { TLoadIndex, TLoadAll, TDeleteAll, TAction, TPlane } from '../../types';

export default function (currentList: TPlane[] = [], action: TAction): TPlane[] {
    let newList: TPlane[] = currentList;
    switch (action.type) {
        case LOAD_INDEX:
            if (planeList[action.index])
                newList = [...currentList, planeList[action.index]];
            break;
        case LOAD_ALL:
            newList = planeList;
            break;
        case DELETE_ALL:
            newList = [];
            break;
    }
    return newList;
}

我的问题是：当我运行以下命令时：

> npm run flow

我收到以下flow 错误：

Error -------------- src/store/plane/reducer.js:9:25

Cannot get action.index because:
 - property index is missing in TDeleteAll [1].
 - property index is missing in TLoadAll [1].

 [1]  5| export default function (currentList: TPlane[] = [], action: TAction): TPlane[] {
      6|        let newList: TPlane[] = currentList;
      7|        switch (action.type) {
      8|                case LOAD_INDEX:
      9|                        if (planeList[action.index])
     10|                                newList = [...currentList, planeList[action.index]];
     11|                        break;
     12|                case LOAD_ALL:


Error -------------- src/store/plane/reducer.js:10:49

Cannot get action.index because:
 - property index is missing in TDeleteAll [1].
 - property index is missing in TLoadAll [1].

 [1]  5| export default function (currentList: TPlane[] = [], action: TAction): TPlane[] {
      6|        let newList: TPlane[] = currentList;
      7|        switch (action.type) {
      8|                case LOAD_INDEX:
      9|                        if (planeList[action.index])
     10|                                newList = [...currentList, planeList[action.index]];
     11|                        break;
     12|                case LOAD_ALL:
     13|                        newList = planeList;

关键是我不想将属性：index 添加到以下类型：{ TLoadAll, TDeleteAll }，因为该属性只需要绑定到类型：TLoadIndex。

问题可能在于flow 如何在内部与switch 协同工作。

你知道如何进行这项工作吗？

谢谢！

【问题讨论】：

标签： node.js react-native redux expo flowtype

【解决方案1】：

这个错误的主要原因是当前动作类型注释太宽泛（string）。解决方案是使它们更窄。需要进行一些更改才能完成这项工作。

1) 在actions 中为操作类型添加窄注释。据说actions目前的样子：

// @flow
export const LOAD_INDEX = 'LOAD_INDEX';
export const LOAD_ALL = 'LOAD_ALL';
export const DELETE_ALL = 'DELETE_ALL';

应该改成

export const LOAD_INDEX: 'LOAD_INDEX' = 'LOAD_INDEX';
export const LOAD_ALL: 'LOAD_ALL' = 'LOAD_ALL';
export const DELETE_ALL: 'DELETE_ALL' = 'DELETE_ALL';

2) 在types.js 中为动作类型添加更窄的注解。

src\types.js

import { LOAD_INDEX, LOAD_ALL, DELETE_ALL } from './actions';
export type TLoadIndex = { type: typeof LOAD_INDEX, index: number }
export type TLoadAll = { type: typeof LOAD_ALL}
export type TDeleteAll = { type: typeof DELETE_ALL}
export type TAction = TLoadIndex | TLoadAll | TDeleteAll;

export type TPlane = {
    title?: string,
    caption?: string,
    text?: string,
    image: string,
};

【讨论】：