TypeScript如何将字符串数组元素解构为可直接使用的参数变量

原写法错误原因 #

你写的const [...arrWithKeys] = someFunc(arrWithKeys)是JS解构赋值的剩余收集语法，作用是将右侧可迭代值的剩余项收集到名为arrWithKeys的数组中，只会覆盖你之前声明的arrWithKeys变量，根本不会生成a、b、c这类对应键名的变量，因此无法实现预期效果。

可行实现方案 #

方案1：对象解构（最推荐，无作用域污染） #

假设someFunc的返回值是和arrWithKeys顺序对应的数组，先将返回结果和键数组合并为对象，再做对象解构即可直接使用对应变量：

const arrWithKeys = ['a','b','c']
// 1. 拿到函数返回的数组结果
const resArr = someFunc(arrWithKeys)
// 2. 生成以arrWithKeys元素为键的对象
const resObj = Object.fromEntries(arrWithKeys.map((key, index) => [key, resArr[index]]))
// 3. 解构得到对应变量
const { a, b, c } = resObj

// 后续可直接使用变量
const title = a.title

如果someFunc本身返回的就是键值对对象，可跳过第二步直接解构。

方案2：自定义上下文对象挂载（无全局污染，无需手动写变量名） #

如果不想手动罗列解构的键名，可以把所有变量挂到自定义的上下文对象上，使用时加个对象前缀即可：

const arrWithKeys = ['a','b','c']
const resArr = someFunc(arrWithKeys)
const ctx = {}
arrWithKeys.forEach((key, index) => {
  ctx[key] = resArr[index]
})

// 后续使用方式
const title = ctx.a.title

方案3：动态挂载到全局对象（不推荐，仅作参考） #

非严格模式下可以把变量直接挂载到全局对象，无需前缀即可访问，但会污染全局作用域，极易出现变量冲突：

const arrWithKeys = ['a','b','c']
const resArr = someFunc(arrWithKeys)
arrWithKeys.forEach((key, index) => {
  window[key] = resArr[index]
})

// 后续可直接访问a、b、c
const title = a.title

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