ES6语法解构对象+实现接口答案

【问题标题】：ES6 syntax destructuring object + implements interfaceES6语法解构对象+实现接口
【发布时间】：2020-12-16 21:27:40
【问题描述】：

我正在浏览一个代码库并遇到了复杂的语法

return json?.result?.map(
({ text: label, value }: { text: string; value: any }) => ({
    label,
    value,
}),
);

我理解模糊（如果我错了，请纠正我）类似

对于来自json 对象的每个结果，运行一个函数，该函数将一个对象作为参数并返回另一个对象。

参数用这个: { text: string; value: any }实现一个接口

虽然{ text: label, value }，但我不明白这里发生了什么。 label 不是在任何地方声明的变量。

【问题讨论】：

label 的声明就像 value 一样。

标签： javascript typescript ecmascript-6

【解决方案1】：

{ text: label, value } 是一个解构赋值，与打字稿没有任何关系。它需要一些对象并将其键“值”绑定到名为 value 的局部变量，并将其键“文本”绑定到某个名为“label”的局部变量。

例如：

const testObj = {
    text: "text",
    value: "value"
}

const printTestObj = ({ text: label, value }) => {
    console.log("label = " + label)
    console.log("value = " + value)
}

printTestObj(testObj)

【讨论】：

【解决方案2】：

此功能在TypeScript Handbook 中称为属性重命名，是对象解构的高级形式。

您对json 结构的评估是正确的，它的类型似乎是Optional<{result?: {text: string, value: any}[]}>。因此包含上述片段的函数的ReturnType是Optional<{label: string, value: any}[]>。

【讨论】：