Question

我花了一些时间来寻找关于stackoverflow的答案，但到目前为止还没有找到任何东西，所以我决定问一下。我目前有一张包含2个项目（表）的映射，可能还会更多，其中一个键是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”中的以下属性：...

注意：请不要建议在tsconfig中使用类型any或对any禁用检查。

注意：我使用了联合操作，但这似乎不是处理我案件的适当方法。

打字稿v.3.5.1
React v.16.8.6

React组件图中项目的类型

0 个答案: