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

Question

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

我尝试了很多选择，比如使用接口而不是类型，使用对象来声明itemsandsetItems的类型，完全按照推断的方式声明类型，甚至试图完全绕过 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>
    );
};

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

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