将JavaScript对象作为函数参数传递- TypeScript等效方法

Question

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

因此，有这个函数（第9-11行）：

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

这是什么构造？是否可以轻松地将其翻译成TypeScript？我的意思是，我可以创建一个包含所有必要 props 的 TypeScript 接口，但我想知道是否有更简短的方法。我从未见过这样的结构，因此非常感谢任何带有更多解释的链接。

谢谢

- Chris4D

---

你可能对这里发生的“解构赋值”感到困惑。 - Bash

如果您不想创建单独的接口，请尝试使用以下代码：function MyCell({ value, columnProps: { rest: { someFunc } } }:{ value: number, columnProps: { rest: { someFunc: () => void } } })。 - user18807217

Answer 1

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

这部分使用解构来从对象中提取属性。与以下代码相同：

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>
}

- Nicholas Tower

Answer 2

似乎参数让你感到困惑了。 MyCell 是一个函数，它接受单个参数。预期该参数是一个具有属性value和columnProps的对象。同样，columnProps也应该是一个对象，并且具有属性rest。预期rest也是一个具有属性someFunc的对象。

这被称为对象解构，在使用它作为参数的特定情况下，它被称为解包 (mdn)。最初的回答。

- junvar