使用 Flow 进行类型检查

Posted 2023-02-19

【中文标题】使用 Flow 进行类型检查

【英文标题】：Type checking with 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]

【参考方案1】：

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

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

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

export type Action = SetUserAction;

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

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