Как использовать несколько типов с необходимыми реквизитами в одном объявлении?

Question

Я пытаюсь использовать этот тип:

type DataTypes =
  | Link
  | Event
  | People
  | Article
  | Department
  | PageSearch
  | OfficeSearch
  | CatalogSearch
  | DocumentSearch
  | KnowledgeSearch;

Если я делаю это так, он работает правильно:

const showOnTypeInQuery = (
    onType: string,
    cardType: (dataType: any[]) => ReactElement,
    dataType: DataTypes[]
  ): ReactElement | null => {
    if (typeInQuery === 'all' || typeInQuery === onType) {
      return cardType(dataType as DataTypes[]);
    }

    return null;
};


const getPeopleCards = (people: People[]): ReactElement => {
    return (
      <ComponentToShow
        data={people}
        heading="People"
      >
        {people.map((p: People) => (
            <PeopleCard
              people={p}
              isFetching={isFetchingData}
            />
        ))}
      </ComponentToShow>
    );
};

return showOnTypeInQuery('people', getPeopleCards, people);

В функции showOnTypeInQuery У меня есть этот параметр :

cardType: (dataType: any[]) => ReactElement

Если я перехожу на этот cardType: (dataType: DataTypes[]) => ReactElement,, он перестает работать и выдает следующую ошибку:

ERROR in [at-loader] ./src/components/searchResult/searchResults.tsx:491:38
    TS2345: Argument of type '(people: People[]) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | ... | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<...>)>' is not assignable to parameter of type '(dataType: DataTypes[]) => ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)>'.
  Types of parameters 'people' and 'dataType' are incompatible.
    Type 'DataTypes[]' is not assignable to type 'PeopleModel[]'.
      Type 'DataTypes' is not assignable to type 'PeopleModel'.
        Property 'loginId' is missing in type 'Article' but required in type 'PeopleModel'.

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

Так что я делаю не так?

Answer 1

Вы не можете поместить функцию, тип которой People[] => ReactElement, в позицию, которая ожидает DataTypes[] => ReactElement, потому что ваша функция может получить, например, параметр типа Link, и она не знает, как его обрабатывать, так как он может обрабатывать только тип People.

---

Я не совсем уверен, чего вы хотите достичь, но если вы хотите повторно использовать showOnTypeInQuery для нескольких типов, таких как Link, Event, People, в вашем примере, одно решение использует generi c, как

const showOnTypeInQuery = <T extends DataTypes>(
    onType: string,
    cardType: (dataType: T[]) => ReactElement,
    dataType: T[]
  ): ReactElement | null => {
    if (typeInQuery === 'all' || typeInQuery === onType) {
      return cardType(dataType);
    }

    return null;
};

showOnTypeInQuery('people', getPeopleCards, people);