javascript - 将 javascript 对象作为参数传递给函数 - typescript 等效

Question

我试图更好地理解此示例中的代码: https://codesandbox.io/s/r5n96yvwnm

所以有这个函数(第 9-11 行):

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

它是什么结构，是否可以轻松地将其翻译成 Typescript？我的意思是，我可以继续创建一个带有所有需要的 Prop 的 typescript 界面，但我想知道是否有更短的方法来做到这一点。我从未见过这样的构造，因此感谢任何包含更多解释的链接。

谢谢

Answer 1

function MyCell({ value, columnProps: { rest: { someFunc } } }) {

这部分使用destructuring从对象中挑选属性。这与:

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

用 typescript 做这个看起来像这样(我猜测界面中的某些类型):

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

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