Destructuring assignment with rename and typing information

Question

How do I destructure a variable into a new name while keeping typing information?

renderItem({item:'apple'})

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

The above will destructure an object with item and assign it to region.

How do I express typing information for this function signature?

Answer 1

Type the incoming item like so:

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