TypeScript 错误：无法调用类型缺少调用签名的表达式答案

【问题标题】：TypeScript error: Cannot invoke an expression whose type lacks a call signatureTypeScript 错误：无法调用类型缺少调用签名的表达式
【发布时间】：2019-09-10 22:28:05
【问题描述】：

我正在尝试创建一个反应可重用组件：一个应该是团队列表或游戏列表的表。因此，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 不兼容...

【问题讨论】：

尝试从 Data [elements] 声明中删除 undefined。
嗨@hazardous 谢谢你的帮助！不幸的是它不起作用，它会弹出另一个错误，因为allElems 是可选的
是否可以在某处分享更完整的代码？
我刚刚发现为什么我不能这样写我的接口；我写了一个答案；）

标签： reactjs typescript graphql apollo

【解决方案1】：

刚刚找到解决方案；不知道是不是最好的：

就我而言，我必须使用declaration merging：

我不会写

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
}

在最基本的层面上，合并会机械地加入两个声明都放在一个同名的接口中。

【讨论】：