TypeScript函数如何支持多类型传参与无参调用并设置默认值

你之前的function myfunc(...values : Array<number>)写法不支持无参调用，是因为剩余参数默认要求至少传入一个值，同时也没有对数组类型的入参做显式的类型兼容处理，我们可以通过函数重载+参数类型收窄+默认值设置来兼容所有四种调用场景：

具体实现代码 #

// 先定义四种调用场景的类型签名
function myfunc(): number[]
function myfunc(...values: number[]): number[]
function myfunc(values: number[]): number[]
// 实际函数实现
function myfunc(...args: (number | number[])[]): number[] {
  // 无参场景返回默认数组，可根据需求修改默认值
  if (args.length === 0) return []
  // 入参为数组场景直接返回传入的数组
  if (Array.isArray(args[0])) return args[0]
  // 零散数字入参场景返回参数组成的数组
  return args as number[]
}

调用验证 #

以下四种调用方式均可正常运行并通过TypeScript类型校验：

• 无参调用：myfunc() → 返回默认空数组
• 单个数字调用：myfunc(1) → 返回[1]
• 多个数字调用：myfunc(1,2) → 返回[1,2]
• 数组参数调用：myfunc([1, 2]) → 返回[1,2]

默认值修改方式 #

如果需要设置非空的默认数组，比如默认返回[5, 10]，只需修改无参分支的返回值即可：

if (args.length === 0) return [5, 10]

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