CODEWITHSUNDEEP
typescriptecmascript-6destructuring
Oliver Watkins
Oliver Watkins

Reputation: 13499

Cannot destructure arrays with re-assigned variables in Typescript

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?

Upvotes: 0

Views: 37

Answers (1)

Nicholas Tower
Nicholas Tower

Reputation: 84912

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')

Upvotes: 1

Related Questions