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

Question

我有以下代码：

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 \店\平面\ 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。

有关如何使这项工作的任何想法？

谢谢！

Answer 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,
};