How to add TypeScript types to destructured parameters using spread syntax?

问题

Ignore the fact that this is bad add function. It's a question about using array destructuring with spread syntax in TypeScript.

This is what I'm trying

const add = ([x,...xs]) => {
  if (x === undefined)
    return 0
  else
    return x + add(xs)
}

console.log(add([1,2,3])) //=> 6

But I have no idea how to add TypeScript types to this. My best guess is to do something like this (most direct translation)

const add = (xs: number[]): number => {
  if (xs[0] === undefined)
    return 0;
  else
    return xs[0] + add(xs.slice(1));
};

console.log(add([1,2,3])); // => 6

Both functions work, but in TypeScript I lose the ability to destructure the array parameter and the function body is junked up with a bunch of ugly stuff like xs[0] and xs.slice(1) – even if I abstract these into their own functions, that's besides the point.

Is it possible in add types to destructured spread parameters in TypeScript?

What I've tried so far

Something like this works for fixed arrays

// compiles
const add = ([x,y,z]: [number, number, number]): number => ...

But of course I need variable length array input. I tried this, but it doesn't compile

// does not compile
const add = ([x, ...xs]: [number, number[]]): number => ...

回答1:

My bad, the answer is as simple as:

const add = ([x, ...xs]: number[]) => {
  if (x === undefined)
    return 0
  else
    return x + add(xs)
}

console.log(add([1, 2, 3])); //=> 6
add(["", 4]); // error

(code in playground)

Original answer:

You can do this:

const add: (nums: number[]) => number = ([x, ...xs]) => {
    if (x === undefined)
        return 0
    else
        return x + add(xs)
}

You can also use a type alias:

type AddFunction = (nums: number[]) => number;

const add: AddFunction = ([x, ...xs]) => {
    ...
}

来源：https://stackoverflow.com/questions/42321953/how-to-add-typescript-types-to-destructured-parameters-using-spread-syntax

标签

typescript

destructuring

spread-syntax