Reactjs 在TypeScript中使用上下文API

我第一次使用Typescript创建一个上下文，我很难让它正常工作。每次我尝试创建接口并将它们放入我的值属性时，我都会遇到错误，我真的需要一些帮助。这是我的上下文（我将在注释中指出错误）

在IContext中，我不知道如何输入事务的类型（它是一个对象数组）

我希望传递value prop、两个函数、事务数组和输入中的所有内容

无论如何，这是我第一次在一个更大的项目中应用typescript，所以如果你们对如何更好地实践它有任何建议，请告诉我

import React, { createContext, useState, ChangeEvent } from 'react';

interface IContext {
  handleInputChange(): void;  
  handleSubmit(): void;
  inputElements: {
    name: string;
    amount: string;
  };
  transactions: <-- I don't know what to put here
}

export const TransactionsContext = createContext<IContext | null>(null)


interface ITransaction {
  name: string;
  amount: string;
}

interface ITransactions {
  transactionList: ITransaction
}


export const TransactionsContextProvider: React.FC = ({ children }) => {
  
  const [transactions, setTransactions] = useState<ITransactions[]>([])
  const [inputs, setInputs] = useState<ITransaction>({
    name: '',
    amount: ''
  })

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target

    setInputs({...inputs, [name]: value })
  }


  const handleSubmit = (e: ChangeEvent<HTMLInputElement>) => {
    e.preventDefault()

    setTransactions([...transactions, inputs])  <-- Error here
  }

  return (
    <TransactionsContext.Provider 
      value={{ transactions, handleInputChange, handleSubmit, inputs }}> <-- Error here
        {children}
    </TransactionsContext.Provider>
  )
}

import React，{createContext，useState，ChangeEvent}来自“React”；
接口IContext{
handleInputChange（）：void；
handleSubmit（）：void；
输入元素：{
名称：字符串；
金额：字符串；
};
事务：您不需要
接口ITransactions

使用
ITransaction[]
作为
事务的类型

const [transactions, setTransactions] = useState<ITransaction[]>([])

const[transactions，setTransactions]=useState（[]


import React，{createContext，useState，ChangeEvent}来自“React”；
接口ITransaction{
名称：字符串；
金额：字符串；
}
接口IContext{
handleInputChange（e:ChangeEvent）：无效；
handleSubmit（e:ChangeEvent）：无效；
输入元素：{
名称：字符串；
金额：字符串；
};
交易：ITransaction[]；
}
导出常量TransactionContext=createContext（null）
导出常量TransactionContextProvider:React.FC=（{children}）=>{
const[transactions，setTransactions]=useState（[]）
常量[inputs，setInputs]=useState({
名称：“”，
金额：''
})
常量handleInputChange=（e:ChangeEvent）=>{
常量{name，value}=e.target
setInputs（{…输入，[名称]：值}）
}
常量handleSubmit=（e:ChangeEvent）=>{
e、 预防默认值（）
setTransactions（[…事务，输入]）；
}
返回(
{儿童}
)
}
我可以在IContext中的事务中添加什么？顺便说一句，它工作了，但是我仍然得到与函数相关的错误。它说类型“（e:changeent）=>void”不能分配给类型“（）=>void”。
事务：ITransaction[]；
接口IContext{handleInputChange（e:changeent）:void；handleSubmit（e:ChangeEvent）：无效；
import React, { createContext, useState, ChangeEvent } from 'react';

interface ITransaction {
  name: string;
  amount: string;
}

interface IContext {
  handleInputChange(e: ChangeEvent<HTMLInputElement>): void;  
  handleSubmit(e: ChangeEvent<HTMLInputElement>): void;
  inputElements: {
    name: string;
    amount: string;
  };
  transactions: ITransaction[];
}

export const TransactionsContext = createContext<IContext | null>(null)

export const TransactionsContextProvider: React.FC = ({ children }) => {
  
  const [transactions, setTransactions] = useState<ITransaction[]>([])
  const [inputs, setInputs] = useState<ITransaction>({
    name: '',
    amount: ''
  })

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target

    setInputs({...inputs, [name]: value })
  }


  const handleSubmit = (e: ChangeEvent<HTMLInputElement>) => {
    e.preventDefault()

    setTransactions([...transactions, inputs]);
  }

  return (
    <TransactionsContext.Provider 
      value={{ transactions, handleInputChange, handleSubmit, inputs }}>
        {children}
    </TransactionsContext.Provider>
  )
}