Typescript ts2322：类型“{ id: number, name: string, paymentStatus: string }”不可分配给类型

Question

嗨，我刚开始使用 React 学习 Typescript，我需要帮助，我无法弄清楚这个错误：

"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'?"

如果所有组件以及接口、类型和数据都在一个文件中，它可以正常工作，但是在将它们分开后我得到了错误。 我试过这个payment_status?: 'paid' | '待办的'; 在InvoiceType 类型中，但我得到了同样的错误。

这是我的界面

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';

这是我的应用

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;

这是发票清单

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;

而且数据

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;

Answer 1

您的界面已归档名称为payment_status 。 但是您正在尝试分配paymentStatus 。 将数据中的paymentStatus更改为payment_status 。

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