javascript - Typed function parameters using destructuring and rest in TypeScript

Question

I have a function:

export default ({
  input: { name, onChange, value, ...restInput },
  meta,
  ...rest
}) => (
  ...
);

Given that 'name' is a string, 'onChange' is a function, 'value' is a string, 'meta' is an object, how can I add types to those parameters? My best guess would be like so:

export default ({
  input: { (name: String), (onChange: function), (value: String), ...restInput },
  (meta: Object),
  ...rest
}) => (
  ...
);

But it seems to have syntax errors. And even more I have no idea how to add types to rest parameters.

Answer 1

To add type declarations to destructured parameters you need to declare the type of the containing object.

From the typescript documentation:

... Confusingly, the colon here does not indicate the type. The type, if you specify it, still needs to be written after the entire destructuring...

let { a, b }: { a: string, b: number } = o;

A PSA about deeply nested destructuring:

Use destructuring with care. As the previous example demonstrates, anything but the simplest destructuring expression is confusing. This is especially true with deeply nested destructuring, which gets really hard to understand even without piling on renaming, default values, and type annotations. Try to keep destructuring expressions small and simple. You can always write the assignments that destructuring would generate yourself.

Destructuring function parameters

In a function, this is how you would declare types for destructured parameters:

export default ({ a, b }: {a: string, b: number}) => (
  ...
);

This looks pretty bad on a longer example though:

export default ({
  input: { name, onChange, value, ...restInput },
  meta,
  ...rest
}: {
  input: { 
    name: string, onChange: ()=>void, value:string, ...restInput 
  }, meta: object
}) => (
  ...
);

Looks pretty bad, so the best you can do here is to declare an interface for your parameters and use that instead of inline types:

interface Params {
  input: { 
    name: string;
    onChange: ()=>void;
    value: string;
  }; 
  meta: object;
}

export default ({
  input: { name, onChange, value, ...restInput },
  meta,
  ...rest
}: Params) => {};

Playground

Article with much more

Rest parameters

For the rest parameters, depending on what you expect these types to be, you can use a index signature:

interface Params {
  // This needs to match the other declared keys and values
  [key: string]: object;
  input: { 
    [key: string]: string | (() => void);
    name: string;
    onChange: ()=>void;
    value: string;
  }; 
  meta: object;

}

export default ({
    input: { name, onChange, value, ...restInput },
    meta,
    ...rest
}: Params) => { };

This will give ...rest a type of {[key: string]: object} for example.

Rest parameter playground