Modifying types of array in Typescript

Question

Say you have a function that returns the following:

const useHook0 = (props) => {
    ...
    API call
    ...
    return [varA, varB, varC] as [boolean, boolean, any]
}

And then you wish to use it in another function like so:

const [itemA, itemB, itemC]: [boolean, boolean, number] = useHook0(configA);
const [itemA1, itemB1, itemC1]: [boolean, boolean, string] = useHook0(configB);

Is there a way to apply types to the original array, say in the form of an interface, such that you only need to indicate what type the 3rd constant will be?

In other words, I feel that writing : [boolean, boolean, number] or : [boolean, boolean, string] is redundant and unnecessary, but I'm unable to find a more concise way of doing this.

EDIT:

The reason why it is being constructed in that manner is that function0 is a hook that is making API calls. So the data can be in many different forms.

The reason why I am not providing it in the form of an object is that if I have multiple API calls being made within one function, I need the ability to rename the constants.

EDIT 2:

The intent in avoiding an assertion each time is to make it such that when itemA.map(result => ...) is called 5 times, I don't need to write itemA.map((result: string) => ...) every single time. Just trying to follow DRY.

Are you casting the type or trying to enforce a return type at the function level? — Bryantee
– Bryantee, Commented Dec 19, 2019 at 20:23
Seems like it would be easier to just use an object with three properties, but whatever. Can that third slot truly be any? Or are the types actually limited? You could just make the type be [boolean, boolean, string | number]... — Heretic Monkey
– Heretic Monkey, Commented Dec 19, 2019 at 20:23

Bryantee · Accepted Answer · 2019-12-19 21:24:51Z

2

If you know what the different configs should return, you can make use of Generics to solve this:

const useHook0 = <T>(props): [boolean, boolean, T] => {...}

const [itemA1, itemB1, itemC1] = useHook0<number>(configA)
const [itemA1, itemB1, itemC1] = useHook0<string>(configB)

edited Dec 19, 2019 at 21:24

answered Dec 19, 2019 at 20:26

Bryantee

5441 gold badge6 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

anesthetic Over a year ago

I edited the post, but the intent is to make it so that when the constants are declared by calling the function, the types are defined such that if I were to call .map() on a constant it would have a type.

Bryantee Over a year ago

I went ahead and updated my answer and removed the previous parts for clarification. Hope that helps!

anesthetic Over a year ago

Yup it works! Thank you so much! Actually if you want to edit your answer to remove the type assertion after the constant declarations, that's actually all I need to have written on my end. So basically "const [itemA1, itemB1, itemC1] = useHook<number>(configA);"

Bryantee Over a year ago

Removed. Thanks @anesthetic.

Evert Over a year ago

The extra <number> might not even be needed if the type of itemC1 is already known

Collectives™ on Stack Overflow

Modifying types of array in Typescript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related