Ошибка TypeScript: невозможно вызвать выражение, тип которого не имеет сигнатуры вызова

Я пытаюсь создать реактивный повторно используемый компонент: таблицу, которая должна быть либо списком команд, либо списком игр. Следовательно, запрос GraphQL отличается в зависимости от того, что извлекается.

поэтому у меня есть эти интерфейсы и типы:

export interface Team {
  id: string;
  name: string;
}

export interface Game {
  id: string;
  competition: string;
}

export interface Data {
  allElems?: Team[] | Game[]
  [elements: string]: Team[] | Game[] | undefined
}

Мой компонент выглядит так:

interface SectionTableProps {
  query: object
}

class SectionTableQuery extends Query<Data, {}> {}

class SectionTable extends React.Component<SectionTableProps, {}> {
  constructor(props: SectionTableProps) {
    super(props);
  }
  render() {
    return (
          <SectionTableQuery query = {this.props.query}>
          {({ data = {}, error, loading }) => {
            if (loading) {
              return <tbody><tr><td>LOADING</td></tr></tbody>
            };
            if (error !== undefined) {
              return <tbody><tr><td>ERROR</td></tr></tbody>
            };
            return (
              <tbody>
                {Object.keys(data).map(elements => {
                  data[elements].map(
                    elem => (
                    <tr key = {elem.id} >
                      <th scope = "row">{elem.id}</th>
                      {Object.keys(elem).map(k => {
                        if (k !== "id" && k !== "__typename") {
                          return <td key = {elem[k]}>{elem[k]}</td>
                        }
                      })}
                    </tr>
                )
              )
            }
          )
          }
              </tbody>
            );
          }}
        </SectionTableQuery>
    )
  }
}

но я получаю следующую ошибку:

TypeScript error: Cannot invoke an expression whose type lacks a call signature. Type '(<U>(callbackfn: (value: Team, index: number, array: Team[]) => U, thisArg?: any) => U[]) | (<U>(callbackfn: (value: Game, index: number, array: Game[]) => U, thisArg?: any) => U[])' has no compatible call signatures.  TS2349

    42 |               <tbody>
    43 |                 {Object.keys(data).map(elements => {
  > 44 |                   (data[elements] || []).map(
       |                   ^
    45 |                     elem => (
    46 |                     <tr key = {elem.id}>
    47 |                       <th scope = "row">{elem.id}</th>

Почему это так ? Я действительно не знаю, почему Game и Team несовместимы...

Попробуйте удалить undefined из объявления Data [elements].

— 21.04.2019 18:42

привет @hazardous спасибо за вашу помощь! к сожалению, это не работает, выдает другую ошибку, потому что allElems не является обязательным

— 22.04.2019 14:06

Можно ли где-нибудь поделиться более полным кодом?

— 22.04.2019 14:24

Я только что понял, почему я не мог писать свои интерфейсы таким образом; Я написал ответ ;)

— 23.04.2019 08:52

reactjs typescript graphql apollo

21.04.2019 13:39

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

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

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

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

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

1 679

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

Ответы 1

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

Просто нашел решение; хотя не знаю, лучший ли он:

В моем случае я должен использовать слияние объявлений :

я не могу писать

export interface Team {
  id: string;
  name: string;
}

export interface Game {
  id: string;
  competition: string;
}

export interface Data {
  allElems?: Team[] | Game[]
  [elements: string]: Team[] | Game[] | undefined
}

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

//team
interface Elem {
  id: string;
  name?: string;
  [attr: string]: string | number  | undefined
}

//game
interface Elem {
  id: string;
  homeTeamScore?: number
  competition?: string
  round?: string
}

export interface Data {
  elem?: Elem
  [elements: string]: Elem | undefined
}