React forwardRef 如何寫泛型並做到型別安全

本文示範如何在 React 中結合 forwardRef 與 TypeScript 泛型，實作可重用且型別安全的 Table 元件，並透過 type assertion 保留完整型別推斷。

CChia1104
筆記1 分鐘閱讀

由於 React 的 forwardRef 是個 HOC (Higher Order Component )，在這狀態下我們沒辦法在 Component 中寫泛型，其中自己最常遇到需要帶泛型並同時又需要 reference 內部方法的元件就是 Table 元件。

若是我們要做到型別安全的元件，可用以下方法

  • 可以用類型斷言（type assertion）讓 forwardRef 組件支援泛型，保留型別推斷。
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;

Written by: Chia1104 CC BY-NC-SA 4.0

頁面

聯絡

Chia1104
©
Chia1104