reactjs - 如何使 React 组件的 props 类型相互依赖并自动推断

Question

我有一个抽象的 React 组件（BaseTable），它获取一个 api 并将结果显示为表中的行：

interface BaseTableProps {
  columns: Column<R>[];
  fetchData: () => Promise<AjaxError | R>
}

const BaseTable: FC<BaseTableProps> = ({
  columns,
  fetchData,
}) => { return .... }

然后我用我想要显示的特定数据表来实现这个基表。

例如，如果我想显示待办事项列表，我会这样做：

// the JSON type that is being returned from the API
interface TodoJSON {
  firstColumn: string;
  secondColumn: string;
}

const fetchTodosAPI: Promise<AjaxError | TodoJSON> = fetchAxios('/todos');

const columns: Column<TodoJSON>[] = [{ key: 'firstColumn' }, { key: 'secondColumn' }];

const TodosTable = () => {
  return (
    <BaseTable fetchData=(fetchTodosAPI) columns={columns} />
  );
};

问题是我如何键入 BaseTable 的打字稿，以便我可以让 R 泛型等于我从 API 加载的数据，在这种情况下 - TodoJSON。

如果我能做到这一点，我将在 BaseTable 中拥有 Column 类型的列。

这样，所有 fetchData 和列都是相关的，并且我拥有从实现方面控制的安全类型。

如果我要更改 Todo 表中的 fetchData JSON 响应类型，列将自动被推断为新的 JSON 类型。

标签： reactjstypescript