Typescript - 省略 HoC 的 props 类型答案

【问题标题】：Typescript - Omit props types of HoCTypescript - 省略 HoC 的 props 类型
【发布时间】：2020-11-07 21:30:44
【问题描述】：

我有withDataTableQuery HoC，它具有获取和传递数据等功能，用于DataTable 组件。这个 HoC 连接到 redux store，其中包含数据，它们通过 props 传递给 withDataTableQuery，然后传递给 DataTable 组件。

我想访问我的 HoC 中的data 属性和DataTable 组件...只是想对其进行强类型化，所以当我输入props.data 时，打字稿会知道这一点。

下面的HoC代码

export interface IWithDataTableQueryProps {
    data: any[];
    //some other props
}

export const withDataTableQuery = (Component) => (props: IWithDataTableQueryProps) => {
    // code
    return <Component
        data={props.data}
        //rest of code
    />;
}

用HoC封装的DataTable组件

export interface IDataTableProps {
    columns: Array<any>;
}

export const DataTable = withDataTableQuery((props: IDataTableProps & IWithDataTableQueryProps) => {
    // code removed for brevity
    return <>{props.data.map(x=> <Row {...x} />)}</>
})

我有一些视图，我在一些 url 下呈现，这个视图组件包含 DataTable 组件。现在我必须做类似data={[]} 的事情来满足打字稿检查我传递了由IWithDataTableQueryProps 接口定义的数据属性，但这是不需要的，因为这是从我的HoC 传递的，我只想指定哪些列将被渲染，所以是这样的

export const View = () => {
    return <DataTable
        columns={columns}
        // data={[]} -> I dont want to specify data prop here just to satisfy TS, 
        // I have to Omit this props somehow
    />
};

【问题讨论】：

不清楚您到底想做什么以及应该如何表达。 IGraphQlProps 或 IConstructor 内部是否有“columns”属性？
传递一个泛型类型怎么样？
@dm.shpak 我更新了问题
@alieslamifard 我可以试一试，但不确定是否可行

标签： javascript reactjs typescript

【解决方案1】：

也许使用 TypeScript Omit 实用程序？

我不太确定您的代码中的实现，但您可以通过扩展使用另一个接口的类型来创建新接口，但省略您不想要的任何键...

type IWithDataTableQueryPropsNoData  = Omit<IWIthDataTableQueryProps, 'data'>

export interface IDataTableProps extends IWithDataTableQueryPropsNoData = {
   columns: Array<any>
}

export const DataTable = (props: IDataTableProps) => {
    // code removed for brevity
    return <>{props.data.map(x=> <Row {...x} />)}</>
}

【讨论】：