TypeScript使用useContext/createContext报TS2488迭代器错误如何解决？

错误原因 #

你在调用createContext创建上下文时，传入的初始值是数字类型的0，TypeScript会自动推导上下文的类型为number。但你在CountProvider中实际注入的上下文值是[count, setCount]组成的数组，类型不匹配导致你尝试对context做数组解构时，TS抛出编译错误。运行时能正常执行，是因为TS的类型校验仅在编译阶段生效，实际运行时上下文的值确实是可迭代的数组。

修复步骤 #

1. 显式给上下文定义正确的元组类型，匹配你实际注入的[状态值, 状态更新函数]结构
2. 调整上下文初始值，和你现有的非法调用抛错逻辑适配
3. 补充组件类型声明，移除不安全的any类型

修复后的完整count-context.tsx代码 #

import React, {createContext, useContext, ReactNode} from "react";

// 定义Context值的正确类型：[count值, count更新函数]
type CountContextValue = [number, React.Dispatch<React.SetStateAction<number>>] | null;

const initialState = 0;
// 创建Context时显式指定类型，初始值设为null适配非空判断逻辑
const CountContext = createContext<CountContextValue>(null);

function useCount() {
    const context = useContext(CountContext);
    if (!context) {
        throw new Error(`useCount must be used within a CountProvider`);
    }

    // 现在context的类型已经被TS收窄为非空的元组，解构不会报错
    const [count, setCount] = context;

    const increment = () => setCount((c: number) => c + 1);
    const decrement = () => setCount((c: number) => c - 1);

    return {
        count, increment, decrement
    }
}

// 补充Provider的props类型，移除any
interface CountProviderProps {
    children: ReactNode;
}
function CountProvider(props: CountProviderProps) {
    const [count, setCount] = React.useState(initialState);
    // as const确保返回的是元组类型，避免被推导为普通数组
    const value = React.useMemo(() => [count, setCount] as const, [count]);
    return <CountContext.Provider value={value} {...props} />
}

export {CountProvider, useCount}

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