I cannot convert that piece of code from Javascript to Typescript.

The problem is converting the ...spread operator.

function calculateCombinations(first, next, ...rest) {

  if (rest.length) {
    next = calculateCombinations(next, ...rest);
  }


  return first.flatMap(a => next.map(b => [a, b].flat()));
}


a1 = ['A', 'B']
a2 = ['+', '-']
a3 = ['1', '2']
a4 = ['X', 'Y', 'Z']
// Show possibile combinations
calculateCombinations(a1, a2, a3, a4); // give me an array of 24 combinations

Attempt to conversion to TS:

  function calculateCombinationsTS(first: any[], next: any[], ...rest: any[]) {
    if (rest.length) {
        next = calculateCombinationsTS(next, ...rest);
    }

   return first.flatMap(a => next.map(b => [a, b].flat()));
  }

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

If I change

 next = calculateCombinationsTS(next, ...rest);

to

 next = calculateCombinationsTS(next, rest);

the function give me a wrong result, because rest is passed as array of array instead of a list of arguments

Example of output:

nCombo = (a1 * a2 * a3 * a4) = 24 possibilities
[
  [ 'A', '+', '1', 'X' ], [ 'A', '+', '1', 'Y' ],
  [ 'A', '+', '1', 'Z' ], [ 'A', '+', '2', 'X' ],
  [ 'A', '+', '2', 'Y' ], [ 'A', '+', '2', 'Z' ],
  [ 'A', '-', '1', 'X' ], [ 'A', '-', '1', 'Y' ],
  [ 'A', '-', '1', 'Z' ], [ 'A', '-', '2', 'X' ],
  [ 'A', '-', '2', 'Y' ], [ 'A', '-', '2', 'Z' ],
  [ 'B', '+', '1', 'X' ], [ 'B', '+', '1', 'Y' ],
  [ 'B', '+', '1', 'Z' ], [ 'B', '+', '2', 'X' ],
  [ 'B', '+', '2', 'Y' ], [ 'B', '+', '2', 'Z' ],
  [ 'B', '-', '1', 'X' ], [ 'B', '-', '1', 'Y' ],
  [ 'B', '-', '1', 'Z' ], [ 'B', '-', '2', 'X' ],
  [ 'B', '-', '2', 'Y' ], [ 'B', '-', '2', 'Z' ] 
]

推荐答案

There are two issues:

  1. If you want to pass a series of array arguments for your rest parameter, you rest parameter must be an array of arrays, not just an array. So: ...rest: any[][]. TypeScript isn't complaining about that because you can use an array for any, but it's a more accurate reflection of what you're doing.

  2. TypeScript can't tell that the call calculateCombinationsTS(next, ...more); will pass an argument for next to the function, even though you have a check on rest.length and so you know it will. You need to call the function with two discrete arguments, followed (optionally) by spreading an array. You can fix that by grabbing the first element from the rest parameter and passing it explicitly:

    if (rest.length) {
        const [first, ...more] = rest;
        next = calculateCombinationsTS(next, first, ...more);
    }
    

    In theory, that might add overhead. In practice, I suspect the overhead will be sufficiently optimized to not be an issue.

    Or, since you know the call is correct (because you know rest has at least one element in it), you could silence the error with a @ts-ignore, but I try to avoid those where I can.

Complete function fixing both issues:

function calculateCombinationsTS(first: any[], next: any[], ...rest: any[][]) {
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^
   if (rest.length) {
       const [first, ...more] = rest;                        // ***
       next = calculateCombinationsTS(next, first, ...more); // ***
   }

   return first.flatMap((a) => next.map((b) => [a, b].flat()));
}

Runnable playground example generating the 72 combinations from your example

Javascript相关问答推荐

自定义高图中的x轴标签序列

我的服务工作器没有连接到我的Chrome扩展中的内容脚本.我该怎么解决这个问题?

优化Google Sheet脚本以将下拉菜单和公式添加到多行

如何修复我的数据表,以使stateSave正常工作?

如何将数据块添加到d3力有向图中?

VSCode中出现随机行

如何在Bootstrap中减少网格系统中单个div的宽度

如果没有页面重新加载Angular ,innerHTML属性绑定不会更新

如何在一个对象Java脚本中获取不同键的重复值?

Phaser3 preFX addGlow不支持zoom

Cherrio JS返回父div的所有图像SRC

为什么我看到的是回复,而不是我的文档?

谷歌饼图3D切片

将以前缓存的 Select 器与querySelector()一起使用

使用Java脚本在div中创建新的span标记

验证Java脚本函数中的两个变量

为什么Reaction useEffect函数会将控制台日志(log)呈现两次

如何在Angular中运行没有哈希的项目

从D3 v3更新,没有错误,但输出SVG路径不可见

JS函数返回未定义的值,即使返回值有效