reactjs - 如何声明 React Context 初始状态的 TypeScript 类型？

Question

我一直在努力声明 React Context 初始状态的 TypeScript 类型以及我们的错误。它将存储一个项目列表，初始状态应该是一个空数组。

我尝试了很多选项，例如使用接口(interface)而不是类型、使用对象来声明 items 和 setItems 的类型、准确地声明类型推断，甚至尝试完全绕过 de 类型声明，我终于设法使其像这样工作:

type Props = [any, any];

export const ListContext = createContext<Partial<Props>>([]);

export const ListProvider = (props: any) => {
  const [items, setItems] = useState([]);

  return (
    <ListContext.Provider value={[items, setItems]}>
      {props.children}
    </ListContext.Provider>
  );
};

我不确定这是否是正确的方法(使用 any 看起来不像)，而且我也不完全理解它为什么有效。

我该如何改进它？提前致谢。

Answer 1

这就是我的处理方式:

type Item = {
    example_prop: number;
};

interface ContextProps {
    items: Item[];
    setItems: Function;
}

export const ListContext = createContext<ContextProps>({
    items: [],
    setItems: () => null
});

interface Props {
    some_prop: string;
}

export const ListProvider: React.ComponentType<Props> = props => {
    const { some_prop } = props; // This is here just to illustrate
    const [items, setItems] = useState<Item[]>([]);

    return (
        <ListContext.Provider value={{ items, setItems }}>
            {props.children}
        </ListContext.Provider>
    );
};

如您所见，我正在通过上下文传递一个对象。该对象的初始状态设置为一个空数组和一个返回 null 的函数；这两个值将被覆盖，实际上不会通过，但却是必需的。

我包含的组件中的 Props some_prop，仅作为示例。如果有不清楚的地方请告诉我。