使用重命名和键入信息解构赋值

Destructuring assignment with rename and typing information

如何在保持键入信息的同时将变量解构为新名称?

renderItem({item:'apple'})

// jsx:
function renderItem({item: region}) {
    // region == 'apple'
    return <div>{region}</div>;
}

以上将解构一个带有 item 的对象并将其分配给 region

如何表达此函数签名的类型信息?

像这样输入传入的项目:

function renderItem({item: region}:{item:string}){}

有关功能类型的信息可在 TypeScript 2.1 文档中找到:

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html

Object rests are the dual of object spreads, in that they can extract any extra properties that don’t get picked up when destructuring an element:

当使用该功能的其余部分时,它通过使我们能够将其余属性收集到由它们组成的新对象中来增强对象解构。

我们可以像为任何其他值一样编写类型注释。这是首选,因为它可以阻止您的函数签名变得冗长例如

interface IRenderItem {
  item: String
}

function renderItem({ item: region }: IRenderItem): void {
  console.log(item);
}