怎样更好的定义 props 属性?

Question

import { Pagination, Table } from "antd";
import ButtonOfTable from "../../../../componentes/button-table/ButtonOfTable";
import { PropertyDelete } from "../property-delete";
import PropertyModify from "../property-modify";

export const PropertyList = (props: any) => {
  const { del, modify, toDetail, history } = props;
  const columns = [
    {
      title: "属性名称",
      dataIndex: "cid",
      width: "200px",
    },
    {
      title: "访问模式",
      dataIndex: "cid",
      width: "200px",
    },
    {
      title: "数据类型",
      dataIndex: "cid",
      width: "200px",
    },
    {
      title: "修改时间",
      dataIndex: "cid",
      width: "200px",
    },
    {
      title: "",
      dataIndex: "cid",
      width: "200px",
      render: (data: any) => (
        <>
          <ButtonOfTable onClick={() => toDetail(data, history)} value="详情" />
          <PropertyModify modify={() => modify(data)} />
          <PropertyDelete del={() => del(data)} />
        </>
      ),
    },
  ];
  const { clientData, pageChange } = props;
  return (
    <>
      <Table
        style={{ marginTop: "10px" }}
        columns={columns}
        rowKey="cid"
        dataSource={clientData?.appUserRegiInfos}
        size={"middle"}
        pagination={false}
      />
      <Pagination
        style={{
          display: "flex",
          justifyContent: "flex-end",
          marginTop: "10px",
        }}
        size="small"
        current={clientData.pageIndex}
        onChange={(page) => pageChange(page)}
        total={clientData?.appUserNum}
        defaultPageSize={9}
        showSizeChanger={false}
      />
    </>
  );
};

Answer 1

需要定义个props type，比如：

interface PropertyListProps {
  del: 你的数据类型;
  modify: 你的数据类型;
  toDetail: 你的数据类型;
  history: 你的数据类型; 
  ...
}

将(props: any)替换为(props: PropertyListProps)。

我还看到，

const { del, modify, toDetail, history } = props;
const { clientData, pageChange } = props;

你为何要解构props两次？
这样写不好嘛

const { 
  del, 
  modify, 
  toDetail, 
  history, 
  clientData, 
  pageChange 
} = props;

Answer 2