Question 167680 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – TypeScript Generics with React Function Components

I have the following component structure:

export interface SearchFilterJobsProps<J = JobPosting> {
  unwrap?: boolean;
  jobs?: {
    data: J[];
    component?: React.ComponentType | React.ElementType;
  };
  searchMatchProps?: (keyof J)[];
}

export type SearchFilterJobsType<T = JobPosting> = React.FC<SearchFilterJobsProps<T>>;

export const SearchFilterJobs: SearchFilterJobsType = <Z extends JobPosting>(
  {
    jobs,
    searchMatchProps,
    className,
    children,
    ...rest
  }: SearchFilterJobsProps<Z> & React.HTMLAttributes<HTMLDivElement>) => { ... };

I have set it up like this, because I would like this component to handle various data structures. But I seem to have made some mistakes, because when I am attempting to use it:

<SearchFilterJobs<SpecificJobProps> jobs={{data: specificJobs}} />

TypeScript tells me: TS2558: Expected 0 type arguments, but got 1..

What am I doing wrong here?

Tags:

2

Answers


  1. 0

    Something like:

    export const SearchFilterJobs: SearchFilterJobsType = ...

    will pick the default type param for SearchFilterJobsType. What’s on the right side doesn’t matter – the type annotation, if provided, must be complete.

    Simplest solution in this case is to use satisfies instead of an annotation on the constant:

    export type SearchFilterJobsType<T = JobPosting> = React.FC<SearchFilterJobsProps<T>>;

export const SearchFilterJobs = (<Z extends JobPosting>(
  {
    jobs,
    searchMatchProps,
    className,
    children,
    ...rest
  }: SearchFilterJobsProps<Z> & React.HTMLAttributes<HTMLDivElement>) => { 
... }) satisfies React.FC<SearchFilterJobsProps<T>>;
    Login or Signup to reply.
  2. 0

    Try rewriting the component const to a function declaration.
    I think that should work 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search