TypeScript中如何在同一块级作用域内重复进行数组解构？

你遇到的问题是因为第二次解构赋值时错误使用了类型注解语法——TypeScript不允许在已声明变量的赋值语句中直接为解构表达式添加类型注解。以下是几种可行的解决方法：

方法一：用类型断言确保右侧类型 #

变量已通过第一次声明确定类型，第二次赋值时只需用类型断言保证返回数组符合预期即可：

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

// 执行其他操作

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

方法二：先存带类型的变量再解构 #

如果希望类型声明更清晰，可以先把查询结果存入带类型的变量，再解构赋值：

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

// 执行其他操作

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

方法三：依赖类型推断简化代码 #

如果screen.findAllByRole('button')的返回类型已被TypeScript正确推断为HTMLElement[]（比如通过库的类型定义），可以直接省略类型断言：

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

// 执行其他操作

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

错误原因说明 #

你最初的写法[backButton, forwardButton]: HTMLElement[] = ...违反了TypeScript语法规则：类型注解仅能用于变量声明（如let [a, b]: Type = ...），不能用于已声明变量的赋值语句。TypeScript无法识别该语法，因此抛出类型错误。

内容的提问来源于stack exchange，提问作者Oliver Watkins