TypeScript中传递方法可选参数时如何指定目标参数

你现在遇到的问题是按顺序传参时，data4被误赋值给了前面的可选参数data3，要指定传递目标参数，有两种实用方法：

方法一：用undefined占位跳过不需要的可选参数 #

因为data3是可选参数，传递undefined相当于明确告知这个参数不填，后续参数就会对应到目标位置。修改testOne的调用代码：

function testOne() {
  let data = 'testOne';
  let data2 = 'testTwo';
  let data4 = 'testFour';
  testTwo(data, data2, undefined, data4); // 用undefined占位跳过data3
}

这样调用后，data3会保持未定义状态，data4能正确接收值，执行结果就是你想要的：

testOne -- testTwo --  -- testFour

方法二：重构为对象参数（更推荐） #

如果可选参数较多，按顺序传参很容易出错，把函数参数改成对象形式，通过键名指定要传递的参数，可读性和灵活性都会更高。

先修改testTwo的定义：

function testTwo(params: {
  data: string;
  data2: string;
  data3?: string;
  data4?: string;
}) {
  let result = `
    ${params.data} -- ${params.data2} -- ${params.data3 || ''} -- ${params.data4 || ''}
  `;
}

然后在testOne里调用时，直接指定键名即可，不用管参数顺序：

function testOne() {
  let data = 'testOne';
  let data2 = 'testTwo';
  let data4 = 'testFour';
  testTwo({ data, data2, data4 }); // 直接传递需要的参数键值对
}

这种方式后续新增参数也不用调整调用代码，还能避免顺序传参的混乱问题。

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