使用useReducer结合useContext时出现TypeScript报错求助

问题根源分析 #

你遇到的初始错误（Operator '<' cannot be applied to types 'boolean' and 'RegExp'、Unterminated regular expression literal）以及后续批量编译错误，核心原因有两个：

• Context类型不匹配：你创建的AppContext类型是storeType，但Provider传入的value包含currentState和dispatch，两者类型完全不兼容，触发TS类型检查失败。
• 代码修改时的语法错误：尝试"展开对象"时误写了JSX语法（比如标签未闭合、符号误用），导致编译器把JSX识别成正则表达式，引发一系列语法报错。

修复步骤 #

1. 修正Context的类型定义 #

首先明确AppContext要提供的内容：不仅是状态，还有dispatch方法，需重新定义Context类型：

import { createContext, PropsWithChildren, useReducer, Dispatch } from "react";
import reducer from "./reducer";

// 状态类型
export type storeType = {
    message: string | null
};

// Reducer的Action类型（需和reducer中处理的action匹配）
export type ReducerAction = {
    type: "SET_MESSAGE" | "CLEAR_MESSAGE";
    payload?: string;
};

// Context类型：包含状态和dispatch方法
type AppContextType = {
    currentState: storeType;
    dispatch: Dispatch<ReducerAction>;
};

// 创建Context，用null作为初始值并断言类型（实际值由Provider提供）
const AppContext = createContext<AppContextType | null>(null);

2. 修正Provider的value传递 #

确保Provider的value类型与AppContextType完全匹配：

const CxtProvider = ({ children }: PropsWithChildren) => {
    const [currentState, dispatch] = useReducer(reducer, { message: null });

    return (
        <AppContext.Provider value={{ currentState, dispatch }}>
            {children}
        </AppContext.Provider>
    );
};

export default CxtProvider;

3. 确保reducer的类型正确 #

你的reducer.ts需匹配定义的类型，示例如下：

import { storeType, ReducerAction } from "./context";

const reducer = (state: storeType, action: ReducerAction): storeType => {
    switch (action.type) {
        case "SET_MESSAGE":
            return { ...state, message: action.payload || null };
        case "CLEAR_MESSAGE":
            return { ...state, message: null };
        default:
            return state;
    }
};

export default reducer;

关键注意点 #

• 始终保证Context类型与Provider传入的value类型一致，TS类型检查会提前发现不兼容问题。
• 修改JSX时注意语法规范：标签闭合、符号配对，避免编译器将JSX识别为其他语法（如正则）。
• 使用useReducer时显式定义Action类型，避免后续修改reducer时出现类型错误。

内容的提问来源于stack exchange，提问作者sjiamnocna