Destructuring a function parameter object and ...rest

Question

I'd like to write a function that takes an object parameter and captures all the remaining parameters in a variable. The goal is to allow the function to receive named parameters (as opposed to positional parameters), some of them optional, and set default values in the function. So, in pseudo code something like this:

interface IMyProps {
  a: string
  b?: number
}

const myfun1 = (p: {a: string, b?:number, ...rest}) => {
  const {a, b = 'hello'} = p;
}

What would be the best way to achieve this in Typescript 2.0?

klugjo · Answer 1 · 2018-05-12T04:04:40.693

14

You can use destructuring assignment directly in the function arguments:

interface IMyType { 
    a: number;
    b: number;
    c: number;
    d: number;
    [k: string]: number; // use this if you don't know the name of the properties in 'rest'
}

const obj: IMyType = { a: 1, b: 2, c: 3, d: 4 }

// Normal destructuring
const { a, b, ...rest } = obj;
console.log(rest); // {c: 3, d: 4}

// Directly in function arguments
const fn = ({ a, b, ...rest }: IMyType) => { console.log(rest); }

console.log(fn(obj)); // {c: 3, d: 4}

edited May 12 '18 at 04:04

answered May 11 '18 at 08:37

klugjo

19,422
8
57
75

Yes, but how would this work with the interface type declared above? I can destructure like the IMyProps like this e.g. `const fn2 = ({a, b}: IMyProps) => 1` But can I declare fn2 so that also other properties would be accepted and capture the remaining in a single variable (e.g. rest)? `fn2({a: '', b: 1, c: 2)` – marko May 11 '18 at 11:07
Yes you can, I have added the full interface above. If you don't know at compile time what the name of the other properties will be, just use `[k: string]: number;` in your interface – klugjo May 12 '18 at 04:03
what if we want to add default values to some properties? – Miguel Antonio Blanco Salcedo Jun 24 '20 at 15:14
you can add defaults like you normally would https://stackoverflow.com/questions/26578167/es6-object-destructuring-default-parameters – klugjo Jun 24 '20 at 16:31

jcalz · Accepted Answer · 2021-01-28T17:36:38.107

UPDATE:

Given the PR at microsoft/TypeScript#28312, you could now use generics, like this:

const myfun1 = <T extends IMyProps>(p: T) => {
    const { a, b = 'hello', ...rest } = p;
    a; // string
    b; // number | 'hello'
    rest; // const rest: Pick<T, Exclude<keyof T, "a" | "b">>
}

in which the rest variable is inferred to be of type Omit<T, "a" | "b">, which is probably what you want.

Pre TS4 answer

I think object destructing with the rest operator in TypeScript corresponds to the index signature on the type of the destructured object if you have pulled off all the explicitly named properties already. That means you would have the same restriction where the types of the rest properties would have to be at least as wide as the union of all the explicitly labeled properties. In your case, you could extend IMyProps with an index signature like this:

interface IMyPropsWithIndex {
  a: string
  b?: number
  [k: string]: string | number | undefined
}

since the type of a is string and the type of b is number | undefined. You could add more stuff to the union but you couldn't make it something narrower like string. If that's okay with you, then the way to do destructuring would be something like this:

const myfun1 = (p: IMyPropsWithIndex) => {
  const { a, b = 'hello' , ...rest } = p;
  a; // string
  b; // number | 'hello'
  rest; // {[k: string]: string | number | undefined}
}

If you inspect the types of the variables, you get something like the above.

Playground link to code

Destructuring a function parameter object and ...rest

2 Answers2