时间戳

首页 > 解决方案 > 如何为两个接口设置依赖关系？

reactjs - 如何为两个接口设置依赖关系？

问题描述

有一个表格组件，它有一个带有行数据数组的参数。它用接口描述：

interface ITableProps {
    columns: Array<IHeadCell>;  
    model: Array<IRowData>;
    getRowId?: (row: IRowData) => string | number;
    striped?: boolean;
    useCheckbox?: boolean;
}

其中model是一个行数组。下一个界面描述的单行：

interface IRowData {
    [key: string]: any;
}

如何在下一个场景中对这两个接口进行类型检查：如果 table 属性useCheckbox具有 true 值，则 interfaceIRowData具有所需的属性selected。如果表属性useCheckbox具有错误值或未定义，则IRowData不需要selected属性。

标签： reactjstypescript

解决方案

虽然您需要的东西是不可能的，但您可以使用联合类型和Omit实用程序类型来解决这个问题。

如果代替ITableProps你有：

interface ITableProps {
    columns: Array<IHeadCell>;  
    model: Array<IRowData>;
    getRowId?: (row: IRowData) => string | number;
    striped?: boolean;
    useCheckbox?: false;
}

interface ICheckboxTableProps extends Omit<ITableProps, "useCheckbox"> {
    model: Array<IRowData & { selected: boolean }>;
    useCheckbox: true;
}

type TableProps = ICheckboxTableProps | ITableProps;

然后ICheckboxTableProps扩展ITableProps除了useCheckBox属性，它被替换为true.

因此，如果联合类型创建为TableProps，它将使用：

  • 接口ITablePropsifuseCheckbox为 false 或未定义，并且
  • 如果它是真的ICheckboxTableProps需要的接口。IRowData.selected

因此：

const table: TableProps = {
    // ...
    model: [],
    useCheckbox: false
}

已验证。

也是

const checkedTable: TableProps = {
    // ...
    model: [{ selected: true }],
    useCheckbox: true
}

但

const invalidTable: TableProps = {
     model: [{ otherProp: "otherValue" }],
     useCheckbox: true
}

不是。

推荐阅读