是否可以使用打字稿声明泛型反应功能组件？答案

【问题标题】：Is it possible to declare generics react functional components using typescript?是否可以使用打字稿声明泛型反应功能组件？
【发布时间】：2021-08-24 10:29:55
【问题描述】：

我想要的是在一个反应功能组件中注释一个泛型，如下所示：

import React, {useEffect, useState} from "react";

interface PaginatedTableProps{
  dataFetcher: (pageNumber: number) => Promise<any>,
  columnNames: string[]
}    

export function PaginatedTable<T>(props: PaginatedTableProps): JSX.Element {
  const [data, setData] = useState<T[]>([]);
  ...
}

然后在另一个功能组件中为 PaginatedTable 功能组件指定具体类型，如下所示：

import React from "react";
import {PaginatedTable} from "./PaginatedTable";
import api from "../../utils/Api";

export function CompanyTable(): JSX.Element{

  interface ConcreteType{
    name: string,
    country: string,
    city: string,
    address: string,
    zipCode: number,
    status: string
  }

  const getData = (pageNumber: number): Promise<any> => {
    return api().getCompanies(pageNumber);
  }

  return (ConcreteType)<PaginatedTable dataFetcher={getData} columnNames={['name', 'country', 'city']}/>
}

可以实现吗？如果是，那该怎么做？

【问题讨论】：

标签： javascript reactjs typescript typescript-generics react-typescript

【解决方案1】：

这是一个通用注释功能组件的工作示例。

interface IProps<T> {
  data: T;
}
function Table<T>(props: IProps<T>) {
  return <div>{props.data}</div>
}
export default function App() {
  return (
    <div className="App">
      <Table<number> data={24}/>
    </div>
  );
}

【讨论】：