TypeScript扩展未知长度可选值数组报错，如何解决？

问题场景 #

尝试将包含未知数量数字或undefined的数组扩展传入函数时，触发TypeScript错误：

A spread argument must either have a tuple type or be passed to a rest parameter.

现有核心代码如下：

函数定义 #

function createData(
  name: string,
  jan?: number,
  feb?: number,
  mar?: number,
  apr?: number,
  may?: number,
  jun?: number,
  jul?: number,
  aug?: number,
  sep?: number,
  oct?: number,
  nov?: number,
  dec?: number
) {
  return { name, jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec };
}

调用代码 #

const numbers: (number | undefined)[] = testData

const rows = [createData("List of Numbers", ...numbers)];

渲染逻辑 #

{rows.map((row) => (
  <TableRow
    key={row.name}
    sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
  >
    <TableCell component="th" scope="row">
      {row.name}
    </TableCell>
    <TableCell align="right">{row.jan}</TableCell>
    <TableCell align="right">{row.feb}</TableCell>
    <TableCell align="right">{row.mar}</TableCell>
    <TableCell align="right">{row.apr}</TableCell>
    <TableCell align="right">{row.may}</TableCell>
    <TableCell align="right">{row.jun}</TableCell>
    <TableCell align="right">{row.jul}</TableCell>
    <TableCell align="right">{row.sep}</TableCell>
    <TableCell align="right">{row.oct}</TableCell>
    <TableCell align="right">{row.nov}</TableCell>
    <TableCell align="right">{row.dec}</TableCell>
  </TableRow>
))}

由于无法确定数组是否包含所有月份的数据，无法使用固定长度的元组类型，需要找到兼容未知长度数组的解决方案。

解决方案 #

方案1：修改函数参数为Rest参数（推荐） #

将原函数的月份参数改为Rest参数，内部解构为对应月份字段，既解决类型不匹配问题，又保持返回对象结构与原代码一致。

修改后的函数：

function createData(
  name: string,
  ...months: (number | undefined)[]
) {
  // 解构数组到对应月份变量，长度不足时自动填充undefined
  const [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] = months;
  return { name, jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec };
}

修改后直接调用createData("List of Numbers", ...numbers)即可，TypeScript不会再报错，且完全兼容原有渲染逻辑。

方案2：类型断言（不修改原函数时使用） #

如果无法修改原函数，可以通过类型断言告诉TypeScript数组符合函数参数的类型要求。由于原函数的月份参数都是可选的，即使数组长度不足，剩余参数会自动填充undefined，与预期行为一致。

示例代码：

// 断言为包含12个可选元素的元组类型
const rows = [createData("List of Numbers", ...(numbers as [
  number | undefined,
  number | undefined,
  number | undefined,
  number | undefined,
  number | undefined,
  number | undefined,
  number | undefined,
  number | undefined,
  number | undefined,
  number | undefined,
  number | undefined,
  number | undefined
]))];

或者使用更简洁的可变长度断言：

const rows = [createData("List of Numbers", ...(numbers as [number | undefined, ...(number | undefined)[]]))];

这种方式无需修改原函数，但类型断言会跳过TypeScript的部分类型检查，需要确保运行时数组元素类型符合要求。

内容的提问来源于stack exchange，提问作者Ian Goodman