typescript - 一起使用 Typescript 可变元组类型和 Javascript Spread

Question

需要帮助理解下面这段代码的工作原理。

function concatFun<T extends any[], U extends any[]>(
  arg1: T[],
  arg2: U[]
): [...T, ...U] {
  const newArr = [...arg1, ...arg2]; // (T | U)[]
  return newArr; // error Type '(T | U)[]' is not assignable to type '[...T, ...U]'.
                 // Target requires 2 element(s) but source may have fewer.
}

我希望返回类型是 [...T, ...U]，但返回类型是 (T | U)[]。

Answer 1

固定您需要推断提供的参数的文字类型

type Json =
  | null
  | string
  | number
  | boolean
  | Array<JSON>
  | {
    [prop: string]: Json
  }

function concatFun<
  Fst extends Json, T extends Fst[],
  Scd extends Json, U extends Scd[]>(
    arg1: [...T],
    arg2: [...U]
  ): [...T, ...U] {
  return [...arg1, ...arg2]

}

concatFun([1, 2, 3], [4, 5, 6]) // [1, 2, 3, 4, 5, 6]

Playground

更新

function concatFun<
  Fst extends Json, T extends Fst[],
  Scd extends Json, U extends Scd[]>(
    arg1: [...T],
    arg2: [...U]
  ) {
  const foo: [...T, ...U] = [...arg1, ...arg2]
  return foo
}
}

您可以帮助 TS 推断串联数组。老实说，我不确定 TS 如何解决它。但是，如果您从 foo

中删除显式类型 [...T, ...U]，则错误消息非常直观