Cannot destructure arrays with re-assigned variables in Typescript

Question

I kind of like the array destructuring in ES6.

I have a test case where I query the buttons and want to directly pull out the button variables rather than mess around with arrays, like so:

let [backButton, forwardButton]: HTMLElement[] = await screen.findAllByRole('button')
fireEvent.click(forwardButton);

However I want to repeat the destructuring later in the code, like so:

let [backButton, forwardButton]: HTMLElement[] = await screen.findAllByRole('button')
fireEvent.click(forwardButton);

//do some stuff

[backButton, forwardButton]: HTMLElement[] = await screen.findAllByRole('button')
fireEvent.click(backButton);

Unfortunately Typescript does not seem to allow me to do this.

I get an error

TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ new (): HTMLElement; prototype: HTMLElement; }'.

Is there any way of being able to destructure twice in one block?

I'm not sure if this is the sole problem (since i don't see how it connects to the error message), but the second destructuring should not have a type. Ie, it should be [backButton, forwardButton] = await screen.findAllByRole('button') — Nicholas Tower
– Nicholas Tower, Commented Oct 28, 2022 at 11:57
You can always post an answer yourself since you were able to resolve the problem. You could also delete the question but since it's not quite a simple "typo", it might be worth keeping for future readers. — user13258211
– user13258211, Commented Oct 28, 2022 at 12:26

Nicholas Tower · Accepted Answer · 2022-10-28 15:22:46Z

1

The HTMLElement[] type definition is only needed when the variables are first created. When you try to do it again on the second line, you are confusing typescript. So the fix is to remove the type from the second destructuring:

[backButton, forwardButton] = await screen.findAllByRole('button')

answered Oct 28, 2022 at 15:22

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

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

Collectives™ on Stack Overflow

Cannot destructure arrays with re-assigned variables in Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related