reactjs - ประเภทสำหรับรายการในแมปของคอมโพเนนต์ React

ฉันใช้เวลาในการค้นหาคำตอบใน stackoverflow และยังไม่พบคำตอบใด ๆ จนถึงตอนนี้ ดังนั้นฉันจึงตัดสินใจถาม ตอนนี้ฉันมีแผนที่ (map) ที่มี 2 รายการ (Tables) และอาจมีมากกว่านี้ โดยที่คีย์เดียวคือชื่อของคอมโพเนนต์ React และค่าคือคอมโพเนนต์นั้น ๆ คอมโพเนนต์เหล่านี้เป็นตาราง (Owners & Overview) ซึ่งจะรับ data เป็น prop เตรียมแถวและหัวข้อจากข้อมูลนั้น และจากนั้นส่งต่อไปยังคอมโพเนนต์ React ทั่วไปอีกตัวหนึ่ง (Table) ฉันจะแสดงตารางทีละหนึ่ง แยกตามการเลือกจากแท็บและรายการดรอปดาวน์ ประเภทของข้อมูลสามารถแตกต่างกันและขึ้นอยู่กับสิ่งที่ฉันได้รับจากแบ็คเอนด์

อินเทอร์เฟซ :

export interface ITables {
    owners: IOwnersTable,
    overview: IOverviewTable,
    [key: string]: ITables[keyof ITables]
}

interface IOverviewTable extends ITable {
    data: OverviewData,
}

interface IOwnersTable extends ITable {
    data: OwnersData,
}

interface ITable {
    isLoading: boolean
    // some other items
}

export type TTableComponent = React.FC<TOwnersTable> | React.FC<TOverviewTable>;

แผนที่เอง:

export const tableComponentMap: ITables = {
    'owners': OwnersTable,
    'overview': OverviewTable
};

รับและแสดงตารางขึ้นอยู่กับ tableName ที่เลือก:

const TableComponent: TTableComponent = tableComponentMap[tableName];

return (
    <TableComponent
        data={data}
        isLoading={isLoading}
    />
)

หนึ่งในส่วนประกอบของตาราง (ตัวที่สองเหมือนกันแต่ข้อมูลต่างกัน):

const OwnersTable: React.FC<IOwnersTable> = ({data, ...rest}) => {
// prepare heads and rows logic out of data

  return (
    <Table
        head={head}
        rows={rows}
        {...rest}
    />
  )
};

export default OwnersTable;

คำถาม: ประเภทของตัวแปรสำหรับส่วนประกอบแผนที่ควรเป็นประเภทใดเพื่อป้องกันความขัดแย้งของประเภท data ที่แตกต่างกัน? จริง ๆ แล้วสามารถกำหนดประเภทได้หรือไม่? ปัจจุบันฉันได้รับข้อผิดพลาดประเภทถัดไปสำหรับบรรทัด data={data}:

ข้อผิดพลาด:(66, 25) TS2322: ประเภท 'IOwnersTable' ไม่สามารถกำหนดค่าให้กับประเภท 'IOverviewTable' ได้ ประเภท 'IOwnersTable' ขาดคุณสมบัติดังต่อไปนี้จากประเภท 'IOverviewTable': ...

หมายเหตุ: กรุณาอย่าแนะนำให้ใช้ประเภท any หรือปิดการตรวจสอบสำหรับ any ใน tsconfig

หมายเหตุ: ฉันใช้การดำเนินการรวม แต่ดูเหมือนว่าวิธีนี้จะไม่เหมาะสมกับกรณีของฉัน

• ไทป์สคริปต์ รุ่น 3.5.1
• React เวอร์ชัน 16.8.6