使用 Flow 进行类型检查答案

【问题标题】：Type checking with Flow使用 Flow 进行类型检查
【发布时间】：2020-07-13 09:50:38
【问题描述】：

我有问题。我写了一个 Flow 类型检查器来检查我的 reducer。出现错误，您能向我解释错误的原因是什么。这是我的代码。

// @flow
import {SET_USER} from "./action-types";
import type {SetUserAction} from "./user-actions"; // export type SetUserAction = (user: User) => Action;
export type State = {
    +username: ?string,
    +firstName: ?string,
    +lastName: ?string,
    +email: ?string,
    avatar?: ?string,
}

export type Action = SetUserAction;

const initialState: State = {
    username: null,
    firstName: null,
    lastName: null,
    email: null,
    avatar: null,
};

type Reducer = (state: State, action: Action) => State;

const userReducer:Reducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_USER:
            return {...action.payload};
        default:
            // (action: empty);
            return state;
    }
};

export {userReducer};

这是错误。

错误 ------------------------------------------- ---------------------------------- src/redux/User/user-actions.js:25:48 无法将函数分配给 setUser，因为缺少声明预期参数/返回类型的调用签名
在对象字面量 [1] 中，但在返回值中存在于 SetUserAction [2]。
src/redux/User/user-actions.js:25:48
25| export const setUser: SetUserAction = user => ({type: SET_USER, payload: user});
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
参考：
src/redux/User/user-actions.js:24:45
24|导出类型 SetUserAction = (user: User) => Action;
^^^^^^ [2]
错误 - - - - - - - - - - - - - - - - - - - - - - - - - ---------------------------- src/redux/User/user-reducer.js:26:20
无法获取 action.type，因为在函数类型 [1] 的静态中缺少属性 type。 src/redux/User/user-reducer.js:26:20
26|开关 (action.type) {
^^^^
参考：
src/redux/User/user-reducer.js:23:39
23| type Reducer = (state: State, action: Action) => State;
^^^^^^ [1]
错误 - - - - - - - - - - - - - - - - - - - - - - - - - ---------------------------- src/redux/User/user-reducer.js:26:13
函数类型 [1] 的静态中缺少属性 type。
src/redux/User/user-reducer.js:26:13
26|开关 (action.type) {
^^^^^^^^^^^^
参考：
src/redux/User/user-reducer.js:23:39
23| type Reducer = (state: State, action: Action) => State;
^^^^^^ [1]
错误 - - - - - - - - - - - - - - - - - - - - - - - - - ---------------------------- src/redux/User/user-reducer.js:28:31
无法获取 action.payload，因为在函数类型 [1] 的静态中缺少属性 payload。 src/redux/User/user-reducer.js:28:31
28|返回 {...action.payload};
^^^^^^^
参考：
src/redux/User/user-reducer.js:23:39
23| type Reducer = (state: State, action: Action) => State;
^^^^^^ [1]

【问题讨论】：

标签： reactjs redux flowtype

【解决方案1】：

根据发布的内容，可能很难诊断出错误的全部原因。但是要检查的一件事是基于此行

import type {SetUserAction} from "./user-actions"; // export type SetUserAction = (user: User) => Action;

您将SetUserAction 类型定义为一个函数（可能是一个动作创建者），然后您将Action 别名为SetUserAction 类型，这实际上意味着减速器中的动作参数是一个函数。

export type Action = SetUserAction;

因此，当你开启action.type时，会出现类型错误，因为SetUserAction类型上没有.type属性。

希望这会有所帮助。这可能不是为什么会出现错误的全部情况，但肯定会是一些错误的原因。

【讨论】：