面对 Object 文字可能只指定 React Typescript 中的已知属性

Question

I was creating project in React Typescript and decided to use Hooks + useContext + useReducer. THen, I created seperate file to configure initial state and provider. But I face the error where ADD_TRANSACTIONS is used. Here is the code I have now:

import * as React from "react";
import { createContext, useReducer, ReactNode } from "react";
import transactionReducer from "./transactionReducer";
const initialState = {
  transactions: [
    { id: 1, text: "Cash", amount: 10000 },
    { id: 2, text: "Food", amount: -10000 },
  ],
};

export const Context = createContext(initialState);

interface Props {
  children: ReactNode;
}

const GlobalProvider = ({ children }: Props) => {
  const [state, dispatch] = useReducer(transactionReducer, initialState);

  const ADD_TRANSACTIONS = (transaction: any) => {
    dispatch({ type: "ADD_TRANSACTIONS", payload: transaction });
  };

  return (
    <Context.Provider
      value={{
        transactions: state.transactions,
        ADD_TRANSACTIONS, Here I face the error which is defined below
      }}
    >
      {children}
    </Context.Provider>
  );
};

export default GlobalProvider;

Here is that error:

'{ transactions: any; ADD_TRANSACTIONS: (transaction: any) => void; }' is not assignable to type '{ transactions: { id: number; text: string; amount: number; }[]; }'.
  Object literal may only specify known properties, and 'ADD_TRANSACTIONS' does not exist in type '{ transactions: {
id: number; text: string; amount: number; }[]; }'.

Answer 1

You made it so your context value (what's provided to components) is the same thing as the reducer initial state. These are different things because ADD_TRANSACTIONS should exist in the context but not in the state. Here's what I would recommend trying:

import * as React from "react";
import { createContext, useReducer, ReactNode } from "react";
import transactionReducer from "./transactionReducer";

interface Transaction {
  id: number;
  text: string;
  amount: number;
}

interface State {
  transactions: Transaction;
}

interface GlobalContextType {
  addTransaction(transaction: Transaction): void;
  state: State;
}

const initialState: State = {
  transactions: [
    { id: 1, text: "Cash", amount: 10000 },
    { id: 2, text: "Food", amount: -10000 },
  ],
};

// Create context with no default value since it will be provided in the component.
// You could try to provide a default value, but it will never be fully complete
// with working functions and everything so I don't see the point in trying.
export const Context = createContext<GlobalContextType>(undefined as any);

// If you don't have any props, get rid of this and replace React.FC<Props>
// later with just React.FC
interface Props {
}

const GlobalProvider: React.FC<Props> = ({ children }) => {
  const [state, dispatch] = useReducer(transactionReducer, initialState);

  return (
    <Context.Provider
      value={{
        state,
        addTransaction(transaction) {
          dispatch({ type: "ADD_TRANSACTIONS", payload: transaction });
        }
      }}
    >
      {children}
    </Context.Provider>
  );
};

export default GlobalProvider;