将 javascript 对象作为参数传递给函数 - 相当于打字稿答案

【问题标题】：Passing javascript object as an argument to a function - typescript equivalent将 javascript 对象作为参数传递给函数 - 相当于打字稿
【发布时间】：2019-10-31 03:48:58
【问题描述】：

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

所以有这个函数（第 9-11 行）：

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

它是什么构造，是否可以轻松地将其翻译成 Typescript？我的意思是，我可以继续创建一个包含所有需要的道具的打字稿界面，但我想知道是否有更短的方法可以这样做。我从来没有见过这样的结构，所以任何有更多解释的链接表示赞赏。

谢谢

【问题讨论】：

您可能对这里出现的destructing assignment 感到困惑。

标签： javascript function parameter-passing

【解决方案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;

使用打字稿执行此操作看起来像这样（我猜测界面中的某些类型）：

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

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

【讨论】：

【解决方案2】：

听起来参数让你感到困惑。 MyCell 是一个接受单个参数的函数。该参数应为具有属性value 和columnProps 的对象。 columnProps 也应该是一个对象，具有属性rest。 rest 同样应该是一个带有 prop someFunc 的 obj。

这称为object destructuring，在参数中使用它的特定情况下，称为unpacking（mdn）。

【讨论】：