Hi I just started learning Typescript with React and I need help, I couldn't figure out this error:

"Type '{ id: number, name: string, paymentStatus: string }' is not assignable to type 'InvoiceType'. 
Object literal may only specify known properties but 'paymentStatus' does not exist in 'InvoiceType'. Did you mean to write 'payment_status'?"

It works fine if all components are in a single file as well as the interface, types and data but after separating them I got the error. I tried this payment_status?: 'paid' | 'pending'; inside the type InvoiceType but i get the same error.

Here's my interfaces

export interface IinvoiceListProps {
    invoiceData: InvoiceDataType
}

export type InvoiceDataType = {
    customer_name: string;
    invoices: Array<InvoiceType>
}

export type InvoiceType = {
    id: number;
    name: string;
    total: string;
    payment_status?: PaymentStatus;
}

export type PaymentStatus = 'paid' | 'pending';

Here's my app

import React from 'react';
import InvoiceList from './components/InvoiceList';
import data from './data';

function App() {
  return (
    <div className="App">
     <InvoiceList invoiceData={data} />
    </div>
  );
}

export default App;

Here's the InvoiceList

import { IinvoiceListProps } from "../interfaces_types";

const InvoiceList = ({invoiceData:{customer_name,invoices}}:IinvoiceListProps)=>{
    return (
        <div>
            <h1>{customer_name}</h1> 
            <ul>
                {
                    invoices.map((invoice)=>(
                        <li key={invoice.id}>
                            <h3>{invoice.name}</h3>
                            <p>{invoice.total} = {invoice?.payment_status}</p>
                        </li>
                    ))
                }
            </ul>
        </div>
    )
}

export default InvoiceList;

And the data

import { InvoiceDataType } from "../interfaces_types";

const data: InvoiceDataType = {
    customer_name:'Test',
    invoices: [
        {
            id: 1,
            name: 'Design Work',
            total: '40.00'
        },
        {
            id: 2,
            name: 'SEO Work',
            total: '50.00'
        },
        {
            id: 3,
            name: 'Dev Work',
            total: '70.00',
            paymentStatus: 'pending'
        },
    ]
}

export default data;

CodePudding user response：

Your interface has filed name is payment_status. But you are trying to assign paymentStatus. Change paymentStatus to payment_status in the data.

{
    id: 3,
    name: 'Dev Work',
    total: '70.00',
    payment_status: 'pending'
 }