Обобщения TypeScript с функциональными компонентами React

У меня есть следующая структура компонентов:

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>) => { ... };

Я настроил его так, потому что хотел бы, чтобы этот компонент обрабатывал различные структуры данных. Но я, кажется, допустил некоторые ошибки, потому что, когда я пытаюсь его использовать:

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

TypeScript говорит мне: TS2558: Expected 0 type arguments, but got 1..

Что я здесь делаю неправильно?

javascript reactjs typescript typescript-generics

11.05.2023 11:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Что-то вроде:

export const SearchFilterJobs: SearchFilterJobsType = ...

выберет параметр типа по умолчанию для SearchFilterJobsType. То, что находится справа, не имеет значения — аннотация типа, если она есть, должна быть полной.

Самое простое решение в этом случае — использовать satisfies вместо аннотации к константе:

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>>;

11.05.2023 12:10

Ответ принят как подходящий

Попробуйте переписать константу компонента в объявление функции. Я думаю, это должно сработать :)

12.05.2023 12:57