CODEWITHSUNDEEP
reactjstypescripttypescript-genericsprimereact
Marco Rovida
Marco Rovida

Reputation: 54

React component Extends generic prop type using typescript

I am trying to extend existing props from Primereact DataTable component but I can't understand why I see this error:

Generic type 'DataTableProps' requires 1 type argument(s)

I was supposed to spread all existing props to my custom component adding custom props (for instance onFilteredItems) but from v-code error, it seems that I need to define 1 or more types. Obviously I don't want to declare all existing props, but only add my custom props definition.

My current code with error:

import React from 'react';
import { DataTable, DataTableProps } from 'primereact/datatable';
.....
interface DtWrapperProps extends DataTableProps {
  onFilteredItems?: (filteredItems: any[]) => void;
}
...

For some reasons is required to define custom type like that:

interface DtWrapperProps extends DataTableProps<T> {
  onFilteredItems?: (filteredItems: any[]) => void;
}

where T is one or more types and at the moment I don't know how to fix it easily.

Upvotes: 2

Views: 57

Answers (1)

Drew Reese
Drew Reese

Reputation: 203333

DataTableProps is a generic type that requires a type parameter that is type DataTableValueArray or extends it, so if you are extending that interface you must also specify the type.

Example:

type DtWrapperProps = DataTableProps<DataTableValueArray> & {
  onFilteredItems?: (filteredItems: any[]) => void;
};

or

also make DtWrapperProps generic and default it to DataTableValueArray and pass an extended type through if necessary:

type DtWrapperProps<T extends DataTableValueArray = DataTableValueArray> =
  DataTableProps<T> & {
    onFilteredItems?: (filteredItems: any[]) => void;
  };

Upvotes: 0

Related Questions