جاوااسکریپت - هوک useTable در React با تایپاسکریپت
پس من یک کلاس جاوااسکریپت با useTable دارم. در جاوااسکریپت به شکل زیر استفاده شده است
import {useTable, useFilters,useAsyncDebounce,useSortBy,usePagination,} from "react-table";
const {getTableProps,getTableBodyProps, headerGroups, page,prepareRow,state,visibleColumns, nextPage,pageOptions,pageCount,previousPage,canPreviousPage,canNextPage,setPageSize,gotoPage
} = useTable({columns,data,defaultColumn,filterTypes,initialState: { pageSize: 10, pageIndex: 0 }
},useFilters, useSortBy,usePagination);
من پروژه جاوااسکریپتم را به تایپاسکریپت تبدیل میکنم.
در تایپاسکریپت آن خط useTable خطا میدهد.
مثال: Property 'page' وجود ندارد در نوع 'TableInstance
آن صفت initialState خطای زیر را به من میدهد
Type '{ pageSize: number; pageIndex: number; }' is not assignable to type 'Partial<TableState<object>>'.
Object literal may only specify known properties, and 'pageSize' does not exist in type 'Partial<TableState<object>>'.ts(2322)
index.d.ts(172, 5): The expected type comes from property 'initialState' which is declared here on type 'TableOptions<object>'
چطور آن خط useTable را در تایپاسکریپت بنویسیم؟
پاسخ شماره ۱
برای استفاده از افزونههای react-table مانند usePagination با تایپاسکریپت، نوعهای مربوط به افزونهها باید اعلام شوند.
این کار با ایجاد یک فایل react-table-config.d.ts یا مشابه آن و اعلام نوعها برای افزونهای که استفاده خواهید کرد (یا برای همه آنها) انجام میشود.
این در اینجا توضیح داده شده است: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table
پاسخ شماره ۲
اینگونه آن را حل کردم:
import {
TableInstance,
usePagination,
UsePaginationInstanceProps,
UsePaginationState,
useSortBy,
UseSortByInstanceProps,
useTable,
} from "react-table";
export type TableInstanceWithHooks<T extends object> = TableInstance<T> &
UsePaginationInstanceProps<T> &
UseSortByInstanceProps<T> & {
state: UsePaginationState<T>;
};
export const TableComponent = () => {
const {
getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
page,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
initialState: { pageIndex: 0, sortBy },
},
useSortBy,
usePagination
) as TableInstanceWithHooks<Deal>;
// ...
}