如何在JavaScript/TypeScript的try/catch块中完成变量解构赋值

关于JavaScript中try/catch块内解构赋值的写法 #

你目前使用的带括号的写法是完全符合ECMAScript规范的正确写法。因为JavaScript解析器会将行首的{识别为块级作用域的起始标记，不带括号的无声明解构赋值会直接触发语法错误，规范要求的括号必填规则在这里完全适用，这也是该场景下的主流推荐写法。

如果你的后续使用逻辑强依赖解构得到的变量，还有两种更优的实现方案可选：

• 方案1：将依赖变量的逻辑全部移入try块内，无需提前声明变量，还可以使用const保证变量不可变性，安全性更高

async function myFunction() {
  try {
    const { query, variables } = await giveMeVariables()
    console.log("QUERY", query);
    console.log("VARIABLES", variables);
  } catch (err) {
    console.log("An error ocurred");
  }
}

• 方案2：封装Promise为错误优先的返回格式，避免嵌套try/catch，逻辑更扁平

// 通用Promise包装工具
function wrapPromise(promise) {
  return promise.then(res => [null, res]).catch(err => [err, null])
}

async function myFunction() {
  const [err, { query, variables } = {}] = await wrapPromise(giveMeVariables())
  if (err) {
    console.log("An error ocurred");
    return
  }
  console.log("QUERY", query);
  console.log("VARIABLES", variables);
}

关于TypeScript中的类型标注 #

是否需要联合undefined类型，取决于catch分支是否会中断函数执行：

1. 如果catch分支内会直接return/抛出错误，中断后续逻辑执行，不需要加undefined联合类型，TS可以自动识别到后续代码执行时变量一定已被赋值

interface VariableRes {
  query: string
  variables: string
}

async function myFunction() {
  let query: string
  let variables: string
  try {
    ({ query, variables } = await giveMeVariables() as Promise<VariableRes>)
  } catch (err) {
    console.log("An error ocurred");
    return // 中断执行，后续代码不会触发变量未赋值的情况
  }
  console.log("QUERY", query);
  console.log("VARIABLES", variables);
}

2. 如果catch分支执行后仍需运行后续逻辑，变量确实存在未赋值的可能，需要声明为预期类型与undefined的联合类型，且后续使用前需要做类型收窄判断

interface VariableRes {
  query: string
  variables: string
}

async function myFunction() {
  let query: string | undefined
  let variables: string | undefined
  try {
    ({ query, variables } = await giveMeVariables() as Promise<VariableRes>)
  } catch (err) {
    console.log("An error ocurred");
  }
  // 使用前做类型收窄
  if (query && variables) {
    console.log("QUERY", query);
    console.log("VARIABLES", variables);
  }
}

如果使用前文提到的「逻辑全放try块内」的写法，类型标注会更简洁，无需处理undefined场景：

interface VariableRes {
  query: string
  variables: string
}

async function myFunction() {
  try {
    const { query, variables }: VariableRes = await giveMeVariables()
    console.log("QUERY", query);
    console.log("VARIABLES", variables);
  } catch (err) {
    console.log("An error ocurred");
  }
}

内容的提问来源于stack exchange，提问作者Harrison Cramer