Как исправить ошибку типизации компонента?

Question

[Slav4ka]

столкнулся с ошибкой

TS2345: Argument of type 'string | string[] | undefined' is not assignable to parameter of type 'T'.   'string | string[] | undefined' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'string | string[] | undefined'.     Type 'undefined' is not assignable to type 'T'.       'undefined' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'string | string[] | undefined'.

Код компонента:

interface IFilters<U extends string | string[] | undefined> {
  setData(filterType: FiltersType, prevValue: U, value: U): void;
  buttonsGroup: JSX.Element;
  source: "partners" | "accounts";
  config: {
    type: FiltersType;
    isMulti: boolean;
    label: string;
    placeholder: string;
    labelClass: string;
  }[];
}

const Filters = <T extends string | string[] | undefined>({
  setData,
  config,
  buttonsGroup,
  source,
}: IFilters<T>): JSX.Element => {
  return (
    <div className={styles.partnersFilters}>
      {config.map((filter) => (
        <Filter<string | string[] | undefined>
          type={filter.type}
          source={source}
          isMulti={filter.isMulti}
          setData={(prevValue, value) => setData(filter.type, prevValue, value)}
          label={filter.label}
          placeholder={filter.placeholder}
          labelClass={filter.labelClass}
          key={filter.type}
        />
      ))}
      {buttonsGroup}
    </div>
  );
};

вызов:

<Filters<string[]> config={filtersConf} source="partners" setData={setData} buttonsGroup={<ButtonsGroup />} />

Comments

[Дмитрий Беляев]

Что-то мне подсказывает, что компонент Filter нужно с тем же параметром типа вызывать, то есть вместо <Filter<string | string[] | undefined> //... писать <Filter<T> //...

А вообще, мне кажется что можно дженерик на setData перенести
И вообще, typescript вполне нормально при вызове сам выводит дженерики из аргументов

[Дмитрий Беляев]

А еще трабла может быть в том, что jsx код <Filter //... транспайлится в React.createElement(Filter, // .... Дженерики можно применять только к вызову функции, мне странно что с tsx такое вообще работает...

Answer 1

[Alexandroppolus]

А какой тип у пропа setData для Filter? Какое value в него приходит?

setData={(prevValue, value) => setData(filter.type, prevValue, value)}

Здесь ты это значение пытаешься присвоить в T