reactjs 如何在从不同组件调用函数时给予通用类型

8tntrjer 于 2022-12-22 发布在 React

关注(0)|答案(1)|浏览(122)

我在react打字机里工作。我创建了一个像这样的通用函数-

interface IUpdatedRows {
  rowsPerPage: number;

  // this is where the confusion is - 
  rows: {
    id: number;
    name: string;
    description: string;
    role: string;
    manager: string;
    total_tasks: number;
    annotator: number;
    qc: number; }[];
  //

  page: number;
}

export const updatedRows = (args: IUpdatedRows) => (args.rowsPerPage > 0
  ? args.rows.slice(args.page * args.rowsPerPage, args.page * args.rowsPerPage + args.rowsPerPage)
  : args.rows
);

在这里，我将使用updatedRows函数从单独的组件有不同的行集。上述情况下工作良好，只有一个组件的行完全具有我上面提到的类型，即。

row: {
    id: number;
    name: string;
    description: string;
    role: string;
    manager: string;
    total_tasks: number;
    annotator: number;
    qc: number; }[];

在不同的组件行中包含以下字段-

row: {
    id: number;
    name: string;
    code: string;
    type: string;
    added_by: string;
    added_on: string;
  };

我不知道如何在row的实用程序文件中给予一个通用类型，它将适用于所有组件。任何帮助，指针是非常感谢的。

reactjs

来源：https://stackoverflow.com/questions/74866539/how-to-give-a-common-type-when-a-function-is-called-from-different-components

1条答案

按热度按时间

gfttwv5a1#

假设IUpdatedRows接口本身和相关函数updatedRows不需要知道关于行类型的任何信息（除了应该是数组的事实），它们应该用于不同类型的行-您可以使用Generics。

interface IUpdatedRows<T> {
  rowsPerPage: number;
  rows: T[];
  page: number;
}

export const updatedRows = <T,>(args: IUpdatedRows<T>) => (args.rowsPerPage > 0
  ? args.rows.slice(args.page * args.rowsPerPage, args.page * args.rowsPerPage + args.rowsPerPage)
  : args.rows
);

interface IComponent1Row{
    id: number;
    qc: number;
    // ...rest
}

interface IComponent2Row{
    id: number;
    name: string;
    // ...rest
}

const rows1: IComponent1Row[] = [];
const rows2: IComponent2Row[] = [];

const updateRows1: IUpdatedRows<IComponent1Row> = {
    page: 1,
    rows: rows1,
    rowsPerPage: 10
}

const updateRows2: IUpdatedRows<IComponent2Row> = {
    page: 1,
    rows: rows2,
    rowsPerPage: 20
}

const updateRows1Result: IComponent1Row[] = updatedRows(updateRows1);
const updateRows2Result: IComponent2Row[] = updatedRows(updateRows2);

连接到Playground：链接

赞(0）回复(0）举报 2022-12-22

我来回答

reactjs 如何在从不同组件调用函数时给予通用类型

1条答案

相关问题

热门标签

最新问答