时间戳

首页 > 解决方案 > 将 javascript 对象作为参数传递给函数 - 相当于打字稿

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

问题描述

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

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

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

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

谢谢

标签： javascriptfunctionparameter-passing

解决方案

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;

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

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

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

推荐阅读