Passing javascript object as an argument to a function - typescript equivalent

user_8024682 0
Viewed 6284

I'm trying to better understand the code in this example: https://codesandbox.io/s/r5n96yvwnm

So there is this function (lines 9-11):

function MyCell({ value, columnProps: { rest: { someFunc } } }) {
  return <a href="#" onClick={someFunc}>{value}</a>
}

What construct is it, and is it possible to translate it easily into Typescript? I mean, I could go ahead and create a typescript interface with all needed props but I was wondering, if there is any shorter way of doing so. I have never seen a construct like this, so any links with more explanation appreciated.

Thanks

parameter-passing function javascript
2 Answers
function MyCell({ value, columnProps: { rest: { someFunc } } }) {

This part is using destructuring to pick the properties off of an object. It's the same as:

function MyCell(props) {
  const value = props.value;
  const columnProps = props.columnProps;
  const rest = columnProps.rest;
  const someFunc = rest.someFunc;

Doing this with typescript would look something like this (i'm guessing at some of the types in the interface):

interface MyCellProps {
  value: number;
  columnProps: {
    rest: {
      someFunc: () => void;
    }
  }
}

function MyCell: React.FC<MyCellProps>({ value, columnProps: { rest: { someFunc } } }) {
   return <a href="#" onClick={someFunc}>{value}</a>
}
user_37948120

Sounds like the params are confusing you. MyCell is a function that takes a single parameter. That parameter is expected to be an object with properties value and columnProps. columnProps is also expected to be an object, with the property rest. rest is likewise expected to be an obj with prop someFunc.

This is called object destructuring, and in the specific case of using it in parameters, it's called unpacking (mdn).

user_69514280
Related