JavaScript带默认参数的函数跳过中间可选参数调用报错如何解决

问题产生原因 #

• JavaScript/TypeScript的函数参数默认按位置顺序匹配，而非按参数名称匹配，不会自动跳过设置了默认值的中间参数。
• 你的调用代码myFunc(1000, 2000)中，传入的第一个值1000对应第一个形参x，第二个值2000直接匹配到第二个形参y，但y的类型限定为boolean，数值2000不符合类型要求因此触发报错。
• 补充说明：你定义的x类型为字面量500，传入1000本身也不符合x的类型规则，同样会触发类型错误。

正确实现方式 #

方案1：给中间可选参数显式传undefined #

默认参数只有在传入值为undefined时才会触发默认值赋值，你可以把第二个参数设为undefined跳过对y的自定义赋值，第三个参数传入你要给z的值：

// 此时y会自动使用默认值true，z赋值为2000
myFunc(1000, undefined, 2000);

方案2（更推荐）：改函数为对象解构传参 #

如果有多个可选参数，建议把参数改为对象解构的形式，不需要记忆参数顺序，可以直接跳过任意可选参数，可读性更强：

调整后的函数定义

public static async myFunc(
  { x, y = true, z = 1000 }: { x: 500, y?: boolean, z?: number }
)

调用方式

// 不需要传y，直接指定x和z即可
myFunc({ x: 1000, z: 2000 });

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