本文示範如何在 React 中結合 forwardRef 與 TypeScript 泛型，實作可重用且型別安全的 Table 元件，並透過 type assertion 保留完整型別推斷。
Written by: Chia1104 CC BY-NC-SA 4.0
由於 React 的 forwardRef 是個 HOC (Higher Order Component )，在這狀態下我們沒辦法在 Component 中寫泛型，其中自己最常遇到需要帶泛型並同時又需要 reference 內部方法的元件就是 Table 元件。
若是我們要做到型別安全的元件，可用以下方法
export interface Props<TData> {
data: TData[];
}
export interface Ref<TData> {
table: Table<TData>;
}
const DataTableWithGeneric<TData>(
props: Props<TData>,
ref: Ref<TData>
) => {
React.useImperativeHandle(ref, () => ({
table,
}));
const table = useReactTable({
data: props.data,
});
return (
// ...table component
)
}
const Forwarded = React.forwardRef(DataTableWithGeneric) as <TData>(
props: Props<TData> & {
ref?: React.ForwardedRef<Ref<TData>>;
},
) => ReturnType<typeof DataTableWithGeneric>;
export const DataTable = Forwarded;