將 JavaScript object 解構轉換為 Typescript 箭頭 ZC1C425268E68385D1AB5074F17A

Question

我已將以下箭頭 function 解構轉換為 Typescript，但是我不明白如何解釋最后一項：圖標：圖標。 此項目未進口或申報。

原裝 JavaScript：

const NavbarDropdown = ({
  children,
  count,
  showBadge,
  header,
  footer,
  icon: Icon
}) => (
  <UncontrolledDropdown nav inNavbar className="mr-2">
    <DropdownToggle nav className="nav-icon dropdown-toggle">
      <div className="position-relative">
        <Icon className="align-middle" size={18} />

轉換為 TypeScript，但出現 {icon: Icon} 錯誤，其中 Icon 既未導入也未在除 function 正文之外的任何地方聲明：

const NavbarDropdown = (
    {children} : {children: string},
    {count} : {count: number},
    {showBadge} : {showBadge: boolean},
    {header} : { header: string},
    {footer} : { footer: string},
    {icon: Icon},
  ) => (
    <UncontrolledDropdown nav inNavbar className="mr-2">
      <DropdownToggle nav className="nav-icon dropdown-toggle">
        <div className="position-relative">
          <Icon className="align-middle" size={18} />

更新：我了解該組所指的有關圖標/圖標的內容，但我仍然找不到導入或聲明圖標的任何地方。 正如這里所建議的是 NavbarDropdown 調用的代碼片段：

  <Collapse navbar>
    <Nav className="ml-auto" navbar>
      <NavbarDropdown
        header="New Messages"
        footer="Show all messages"
        icon={MessageCircle}
        count={messages.length}
        showBadge
      >
        {messages.map((item, key) => {
          return (
            <NavbarDropdownItem
              key={key}
              icon={
                <img
                  className="avatar img-fluid rounded-circle"
                  src={item.avatar}
                  alt={item.name}
                />
              }
              title={item.name}
              description={item.description}
              time={item.time}
              spacing
            />
          );
        })}
      </NavbarDropdown>

Answer 1

兩個問題似乎很突出：

1. 您對Icon的問題。

2. 這不是您定義單個解構參數類型的方式

關於#1，你說過：

轉換為 TypeScript，但出現{icon: Icon}錯誤，其中除了 function 正文之外的任何地方都沒有導入或聲明Icon

在 JavaScript 版本中， icon / Icon如下所示：

const NavbarDropdown = ({
  children,
  count,
  showBadge,
  header,
  footer,
  icon: Icon
}) => (

那個icon: Icon看起來很像 TypeScript 類型，但事實並非如此。 這是解構的一部分。 它獲取 object 上的icon屬性的值並將其分配給Icon標識符。 就好像你有這個：

const NavbarDropdown = (props) => {
    let children = props.children;
    // ...
    let Icon = props.icon;

因此在 function 中用於它的標識符以大寫字符開頭，因此它可以用作 JSX 中的 React 組件： <Icon className="align-middle" size={18} /> （如果你有<icon.../>相反，它將是一個 HTML 元素，而不是 React 組件。）

關於 #2：您的代碼 id 解構了一系列參數，每個屬性一個。 相反，您將類型放在解構{} s 之后：

const NavbarDropdown = ({
  children,
  count,
  showBadge,
  header,
  footer,
  icon: Icon
}: {
  children: string;
  count: number;
  showBadge: boolean;
  header: string;
  footer: string;
  icon: React.Component;
}) => (
  <UncontrolledDropdown nav inNavbar className="mr-2">
    <DropdownToggle nav className="nav-icon dropdown-toggle">
      <div className="position-relative">
        <Icon className="align-middle" size={18} />
        ...

或者聲明一個可以重用的類型（它也可能有助於清晰），然后使用該類型名稱：

interface NavbarDropdownProps {
  children: string;
  count: number;
  showBadge: boolean;
  header: string;
  footer: string;
  icon: React.Component;
}
const NavbarDropdown = ({
  children,
  count,
  showBadge,
  header,
  footer,
  icon: Icon
}: NavbarDropdownProps) => (
  <UncontrolledDropdown nav inNavbar className="mr-2">
    <DropdownToggle nav className="nav-icon dropdown-toggle">
      <div className="position-relative">
        <Icon className="align-middle" size={18} />
        ...

但特別是在鍵入 React 函數式組件時，React 提供了一個有用的類型： React.FunctionComponent或其較短的別名React.FC （大多數人使用后者）：

interface NavbarDropdownProps {
  children: string;
  count: number;
  showBadge: boolean;
  header: string;
  footer: string;
  icon: React.Component;
}

const NavbarDropdown: React.FC<NavbarDropdownProps> = ({
  children,
  count,
  showBadge,
  header,
  footer,
  icon: Icon
}) => (
  <UncontrolledDropdown nav inNavbar className="mr-2">
    <DropdownToggle nav className="nav-icon dropdown-toggle">
      <div className="position-relative">
        <Icon className="align-middle" size={18} />
        ...

請注意，由於您通過使用帶有React.FC的通用參數來告訴 TypeScript 道具的類型，因此您不必再在參數列表中提供類型。

但通常情況下，功能組件中的children級應該是ReactNode類型，而不是string類型。 string會起作用，因為ReactNode是一個聯合類型，而string是它的一部分，但它會縮小通常您希望允許所有子級的子級的類型。