import { ReactNode } from "react";
import { Equal, Expect } from "../helpers/type-utils";
interface TableProps<T> {
rows: T[];
renderRow: (row: T) => ReactNode;
}
export const Table = <T,>(props: TableProps<T>) => {
return (
<table>
<tbody>
{props.rows.map((row) => (
<tr>{props.renderRow(row)}</tr>
))}
</tbody>
</table>
);
};
interface User {
id: number;
name: string;
age: number;
}
<>
<Table<User>
// @ts-expect-error rows should be User[]
rows={[1, 2, 3]}
renderRow={(row) => {
type test = Expect<Equal<typeof row, User>>;
return <td>{row.name}</td>;
}}
/>
<Table<User>
rows={[
{
id: 1,
name: "John",
age: 30,
},
{
// @ts-expect-error id should be string
id: "2",
name: "Jane",
age: 30,
},
]}
renderRow={(row) => {
type test = Expect<Equal<typeof row, User>>;
return <td>{row.name}</td>;
}}
></Table>
</>;
It is a wired syntax, but it works: <Table<User> {...props} />
- Components Typescript Arguments Passing Reactcomponents typescript arguments passing react typescript components propstype function compare typescript arguments typescript inferring arguments curried components typescript generics strongly extracting components typescript custom styled-components typescript components组件 components instances elements react typescript workspace monorepo react typescript component strongly react