連接不同簽名的陣列時，沒有多載匹配TypeScript中的此呼叫

我收到此錯誤：

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，然后是columnA簽名為 2 的 1。

uj5u.com熱心網友回復：

您可以使用陣列擴展符號：

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 代碼。

標籤：

上一篇：ReactHook“useState”被稱為內部條件，但不是條件在內部

下一篇：在組件React中添加子路由