Почему typescript выдает ошибку при использовании generic?

Question

[merss]

Полный код здесь https://codesandbox.io/s/cocky-swanson-j6zt6

interface FiltersProps<T> {
  filters: T[];
}

const Filters = <T extends object>(props: FiltersProps<T>) => {
  const { filters } = props;
  return (
    <div>
      {filters.map((filter: T) => {
        return (
          <div>
            {filter.title}
            {filter.name}
          </div>
        );
      })}
    </div>
  );
};

interface FiltersType {
  name?: string;
  title?: string;
}

const Main = (props: Props) => {
  return <Filters<FiltersType> filters={filters} />;
};

Typescript выдает ошибку - Свойство "name" не существует в типе "T", но ведь я передаею интрефейс FiltersType в компонент Filters?
Как сделать чтобы можно было передавать динамически тип в компонент Filters?

Answer 1

[Антон Спирин]

Не нужны тут дженерики.

interface Filter {
  name?: string;
  title?: string;
}

interface FiltersProps {
  filters: Filter[];
}

const Filters: React.FC<FiltersProps> = ({ filters }) => (
  <div>
    {filters.map((filter: Filter) => (
      <div key={filter.name}>
        {filter.title}
        {filter.name}
      </div>
    ))}
  </div>
);

const Main: React.FC = () =>  (
  <Filters filters={filters} />
);

Answer 2

[Robur]

<T extends object>
замените на
<T extends {name?: string; title?: string} >

Иначе TS никак не может знать что поле name есть у T - и потому он вам правильно ругается. А вообще как вам уже сказали, дженерики вам с большой вероятностью не нужны. По крайней мере в таком примере - динамически тип передавать не надо, от этого у вас ничего не зависит. Достаточно чтобы просто передаваемый тип приводился к FiltersType