Question

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

我尝试了许多选项，例如使用接口而不是类型，使用对象声明items和setItems的类型，完全按照推断的类型声明类型，甚至尝试绕过完全删除了类型声明，我终于设法使它像这样工作：

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

这是我的处理方式：

interface Item {
    example_prop: number;
}

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

interface Props {
    children: React.ReactNode;
}

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

export const ListProvider: React.ComponentType<Props> = props => {
    const [items, setItems] = useState<Item[]>([]);

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

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

组件中的道具是它所接收的，因此在问题的情况下，它仅是子代。让我知道是否不清楚。

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

1 个答案: