在将prop传递给React中的子组件时出现TypeScript错误

我正在使用React + Typescript构建费用跟踪器应用

ensemum_type.ts

    export  type IState = {
    id : number,
    text : string,
    amount : number

}

export type IinitialStateType =  {
    transactions : IState[]
}

export type IActions =  {
    type : string,
    payload : any
}

export type contextProps = {
    transactions : IState[];
    addTransaction: (trans: IState) => void;
    deleteTransaction: (id: number) => void;
}

然后，我使用了API上下文和reducer，并在Global State文件中初始化了我的初始状态

GlobalState.tsx

import React , {createContext,useReducer} from 'react'
import {IinitialStateType,contextProps} from '../Types/expense_type'
import AppReducer from './AppReducer'

const initailState : IinitialStateType = {
    transactions : [
          { id: 1, text: 'Flower', amount: -20 },
          { id: 2, text: 'Salary', amount: 300 },
          { id: 3, text: 'Book', amount: -10 },
          { id: 4, text: 'Camera', amount: 150 }
    ]
}

export const GlobalContext = createContext<Partial<contextProps>>({})

export const GlobalProvider : React.FC = ({children}) : JSX.Element => {

    const [state,dispatch] = useReducer(AppReducer,initailState)
    
    return(
        <GlobalContext.Provider value={{
            transactions : state.transactions
        }}>
            {children}
        </GlobalContext.Provider>
    )
}

然后，我在TransactionList.tsx组件中使用了上下文，并映射了所有初始状态值，并将这些值传递给接收这些值的子组件Transaction.tsx

TransactionList.tsx

import React ,{useContext}from 'react'
import {GlobalContext} from './../Context/GlobalState'
import {contextProps,IinitialStateType,IState} from '../Types/expense_type'
import {Transaction} from './Transaction'

export const TransactionList : React.FC = () : JSX.Element => {

    const {transactions} : any = useContext(GlobalContext)
    return (
        <>   
            <h3>History</h3>
            <ul className="list">
                { 
                    transactions.map( (transaction : IState , index : number)  => 
                        (<Transaction key={index} transaction={transaction} />
                    )) 
                 }
            </ul>
        
        </>
    )
}

Transaction.tsx

    import React from 'react'
    import {IinitialStateType} from '../Types/expense_type'
    export const Transaction : React.FC<IinitialStateType>= (props : any) : JSX.Element => {

    let sign : string = props.transaction.amount > 0 ? '+' : '-'

    return (
        <>
            <li className={props.transaction.ammount < 0 ? "minus" : "plus"}>
                {props.transaction.text}{" "}
                <span>
                    {sign}${Math.abs(props.transaction.ammount)}
                </span>
                <button
                    className="btn-delete"
                >
                    x
                </button>
            </li>
        </>
    )
}

但是在编译时会在TransactionList.tsx文件中给出错误

TypeScript error in C:/Users/Abdul Rehman Aziz/Desktop/New folder/expense-tracker-ts/src/Components/TransactionList.tsx(14,88): Type '{ key: number; transaction: IState; }' is not assignable to type 'IntrinsicAttributes & IState & { children?: ReactNode; }'.   Property 'transaction' does not exist on type 'IntrinsicAttributes & IState & { children?: ReactNode; }'.  TS2322

    12 |             <h3>History</h3>
    13 |             <ul className="list">
  > 14 |                  { transactions.map( transaction => (<Transaction key={transaction.id} transaction={transaction} />)) }
       |                                                                                        ^
    15 |             </ul>
    16 |         </>
    17 |         </>