连接不同签名的数组时，没有重载与 TypeScript 中的此调用匹配

Question

我收到这个错误：

No overload matches this call.
  Overload 1 of 2, '(...items: ConcatArray<{ title: string; width: number; dataIndex: string; render: (level: string) => Element; }>[]): { title: string; width: number; dataIndex: string; render: (level: string) => Element; }[]', gave the following error.
    Argument of type '{ title: Element; dataIndex: string; width: number; render: (myThing: MyType) => Element; }[]' is not assignable to parameter of type 'ConcatArray<{ title: string; width: number; dataIndex: string; render: (level: string) => Element; }>'.
      The types returned by 'slice(...)' are incompatible between these types.
        Type '{ title: Element; dataIndex: string; width: number; render: (myThing: MyType) => Element; }[]' is not assignable to type '{ title: string; width: number; dataIndex: string; render: (level: string) => Element; }[]'.
          Type '{ title: JSX.Element; dataIndex: string; width: number; render: (myThing: MyType) => JSX.Element; }' is not assignable to type '{ title: string; width: number; dataIndex: string; render: (level: string) => JSX.Element; }'.
            Types of property 'title' are incompatible.
              Type 'Element' is not assignable to type 'string'.
  Overload 2 of 2, '(...items: ({ title: string; width: number; dataIndex: string; render: (level: string) => Element; } | ConcatArray<{ title: string; width: number; dataIndex: string; render: (level: string) => Element; }>)[]): { ...; }[]', gave the following error.
    Argument of type '{ title: Element; dataIndex: string; width: number; render: (myThing: MyType) => Element; }[]' is not assignable to parameter of type '{ title: string; width: number; dataIndex: string; render: (level: string) => Element; } | ConcatArray<{ title: string; width: number; dataIndex: string; render: (level: string) => Element; }>'.
      Type '{ title: Element; dataIndex: string; width: number; render: (myThing: MyType) => Element; }[]' is not assignable to type 'ConcatArray<{ title: string; width: number; dataIndex: string; render: (level: string) => Element; }>'.

错误是因为我连接了两个具有不同签名的数组：

const columnA = {
  title: '',
  width: 100,
  dataIndex: 'level',
  render: (level: string) => {
    return <b>L{level}</b>
  }
}

const remainingColumns = [
  {
    title: (
      <div>hello</div>
    ),
    dataIndex: 'something',
    width: 240,
    render: (myThing: MyType) => {
      return <div>{myThing.title}</div>
    }
  },
  {
    title: (
      <div>world</div>
    ),
    dataIndex: 'else',
    width: 240,
    render: (myThing: MyType) => {
      return <div>{myThing.title}</div>
    }
  }
]

const columns = [columnA].concat(remainingColumns)

我该如何解决这个问题，我有一个 remainingColumns 的动态数字，它们都具有签名 1，然后是 1 columnA 具有签名 2.

Answer 1

您可以使用 array spread notation:

const columns = [columnA, ...remainingColumns]

类型将被推断为一个数组，其中组件类型是联合，这大概是你想要的：

const columns: ({
    title: Element;
    dataIndex: string;
    width: number;
    render: (myThing: MyType) => Element;
} | {
    title: string;
    width: number;
    dataIndex: string;
    render: (level: string) => Element;
})[]

也无需担心与旧版本Javascript的兼容性问题；例如，如果您将输出语言设置为 ES5，则 Typescript 会将传播语法转换为等效的 ES5 代码。

连接不同签名的数组时，没有重载与 TypeScript 中的此调用匹配

No overload matches this call in TypeScript when concatenating arrays of different signatures

typescript

reactjs

antd