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

Question

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

我已经尝试了许多选项，例如使用接口而不是类型，使用对象来声明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 的函数;这两个值将被覆盖，并且不会实际传递，但这是必需的。

我包含的组件中的道具some_prop，只是作为一个例子。如果有什么不清楚的地方，请告诉我。