Typescript：动态推断类型

Question

interface TableProps {
   headers: {
      text: string;
      value: string;
   }[];
   onClickRow: (item: unkown) => void;
   api: {
        url: string;
   };
}
        
const Table: React.FC<TableProps> = ({headers, onClickRow, api}) => {
   const [items, setItems] = useState([]);

   useEffect(() => {
      here i call the api and set it to items
   },[])
 
   return (
      <table>
         <thead>
            <tr>
               {headers.map((header, index) => (
                   <td key={index}>
                       {header.text}
                   </td>
                ))}
            </tr>
         </thead>
         <tbody>
            {items.map((item: any, index) => (
               <tr onClick={() => onClickRow(item)}>
                   {headers.map((header, headerIndex) => (
                       <TableCell key={headerIndex}>
                           {item[header.value]}
                       </TableCell>
                    ))}
               </tr>
            ))}
         </tbody>
      </table>
   )
}

I have a table component where i can pass the api url and it calls it on mount. I'm passing down the headers array which is an array of text and value. Text the one that is shown on the header and value is the property of the response from the api. Basically I want to infer the type on onClickRow(item) and it is based on the value property in the headers array. Is it possible?

Sample:

headers: [
  {text: 'Sample Text', value: 'FirstProperty'},
  {text: 'Sample Text', value: 'SecondProperty'},
]

item in onClickRow should look like this:

{
  FirstProperty: string | number | boolean
  SecondProperty: string | number | boolean
}

Answer 1

It's possible, but the union of the header values must be provided.

interface TableProps<H extends string> {
  headers: ReadonlyArray<{
    text: string
    value: H
  }>
  onClickRow: (item: Readonly<Record<H, string | number | boolean>>) => void
  api: { url: string }
}