Javascript 在React TypeScript中创建单个上下文提供程序时出错

我试图通过以下方式为Cart创建上下文：对于React TypeScript项目

我不清楚这个上下文中的参数是什么。我在多个地方发现了错误。这是我到目前为止写的：

import React, { createContext, useReducer } from 'react';
import { CartReducer, sumItems } from './CartReducer';

export const CartContext = createContext({}); <-- 1) Ambiguity Here

type Props = { children: React.ReactElement }

const storage = localStorage.getItem('cart') ? JSON.parse(localStorage.getItem('cart')) : []; <-- Error1 here
const initialState = { cartItems: storage, ...sumItems(storage), checkout: false };

const CartContextProvider = ({children} : Props) => {
     const [state, dispatch] = useReducer(CartReducer, initialState)
     const increase = payload => {    <-- Error2 Here and for all Payloads below
          dispatch({ type: 'INCREASE', payload })
     }
     const decrease = payload => {
          dispatch({ type: 'DECREASE', payload })
     }
     const addProduct = payload => {
          dispatch({ type: 'ADD_ITEM', payload })
     }
     const removeProduct = payload => {
          dispatch({ type: 'REMOVE_ITEM', payload })
     }
     const clearCart = () => {
          dispatch({ type: 'CLEAR' })
     }
     const handleCheckout = () => {
          console.log('CHECKOUT', state);
          dispatch({ type: 'CHECKOUT' })
     }
     const contextValues = {
          removeProduct,
          addProduct,
          increase,
          decrease,
          clearCart,
          handleCheckout,
          ...state
     }
     return (
          <CartContext.Provider value={contextValues} >
               { children}
          </CartContext.Provider>
     );
}
export default CartContextProvider;  

为了解决这个问题，我尝试了以下方法：

// Fix for Error1:
const storage = localStorage.getItem('cart') ? JSON.parse(localStorage.getItem('cart') || '{}') : [];

// Fix for Error2:
type PropsforPayload = { payload: React.ReactElement }
const increase = (payload: PropsforPayload) => { //Similar for all the occurences.

---

我的问题是：我的两种方法有效吗？它们是否始终一致，以及如何正确使用类型（接口）的上下文。createContext是默认值。仅当您在没有提供程序的情况下获取上下文值时才使用它。如果没有合理的默认值，您可能希望在这种情况下抛出错误。我使用

null

作为默认值，并在

React.useContext

周围使用自定义包装器，如果发生这种情况，它将抛出一个错误。

2-Typescript不知道在这种情况下，

localStorage.getItem（'cart'）

总是返回相同的值，所以当第二次调用它时，Typescript仍然认为它可能为null。因此，应首先将其保存到变量：

const cartString = localStorage.getItem('cart');
const storage = cartString  ? JSON.parse(cartString) : [];

或

3-Typescript不知道什么是有效负载，所以您应该手动指定它。或者，您可以尝试使用一些typescript友好的库来实现它，即

const cartString = localStorage.getItem('cart');
const storage = cartString  ? JSON.parse(cartString) : [];

const storage = JSON.parse(localStorage.getItem('cart') ?? "[]");