Question

我有withDataTableQuery HoC，它具有诸如为DataTable组件提取和传递数据等功能。此HoC连接到包含数据的redux存储，它们通过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接口定义的data prop的打字稿检查，但这是不必要的，因为这是从我的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
    />
};

Answer 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} />)}</>
}

打字稿-HoC的遗漏道具类型

1 个答案: