Monday, May 13, 2024
 Popular · Latest · Hot · Upcoming
58
rated 0 times [  62] [ 4]  / answers: 1 / hits: 17828  / 6 Years ago, fri, november 16, 2018, 12:00:00

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.


More From » typescript

 Answers
19

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


[#53107] Sunday, November 11, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
clarkulisesa

Total Points: 422
Total Questions: 93
Total Answers: 112

Location: Austria
Member since Thu, Jan 7, 2021
3 Years ago
clarkulisesa questions
Mon, Feb 24, 20, 00:00, 4 Years ago
Mon, Aug 12, 19, 00:00, 5 Years ago
;