在arrow函数中将JavaScript对象分解转换为Typescript

我已经将下面的箭头函数destructure转换为Typescript，但是我不知道如何解释最后一项：icon:icon。此项目未导入或声明

原始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} />

const NavbarDropdown=({
儿童
计数
展示徽章，
标题，
页脚，
图标：图标
}) => (

已转换为TypeScript，但{icon:icon}错误除外，其中除了在函数体中之外的任何位置都未导入或声明图标：

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

const NavbarDropdown=(
{children}:{children:string}，
{count}:{count:number}，
{showBadge}:{showBadge:boolean}，
{header}:{header:string}，
{footer}:{footer:string}，
{icon:icon}，
) => (

更新：我了解此组所指的图标/图标，但我仍然找不到任何导入或声明图标的地方。如建议的，这里是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>

{messages.map（（项，键）=>{
返回(
);
})}

两个似乎很突出的问题：

您的

图标问题

这不是定义单个非结构化参数类型的方式

关于1，你说过：

已转换为TypeScript，但出现

{icon:icon}

错误除外，其中

icon

未在函数体之外的任何位置导入或声明

在JavaScript版本中，

图标

/

图标

如下所示：

const NavbarDropdown=({
儿童
计数
展示徽章，
标题，
页脚，
图标：图标
}) => (

该

图标：icon

看起来很像TypeScript类型，但它不是。它是解构的一部分。它获取对象上

icon

属性的值，并将其分配给

图标

标识符。就好像您有这样一个：

const-NavbarDropdown=（道具）=>{
让孩子们=道具。孩子们；
// ...
让Icon=props.Icon；

因此，函数中用于它的标识符以大写字符开头，因此它可以用作JSX中的React组件：

（如果您使用的是

，则它将是HTML元素，而不是React组件。）

Re#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} />
        ...

请注意，由于您是通过使用带有

React.FC

的通用参数来告诉TypeScript道具的类型，因此不必再在参数列表中提供该类型

---

但通常情况下，功能组件中的

子项应为
ReactNode
类型，而不是
string
string
将起作用，因为
ReactNode
是一种联合类型，而
string
是其一部分，但它将缩小子项的类型，通常您希望允许所有类型children.
您的TypeScript版本与JavaScript版本具有完全不同的签名。请尝试使用
const-navbdropdown:React.FC=…
{children，count，…}：{children:string，count:number，…

您所做的是创建一个多参数函数，而不是一个具有1个参数的函数，您可以销毁它。

React.FC

唯一的问题是OP已经决定

children

是一个字符串，而不是ReactNode。

图标

不是类型e> 图标，但类似于

React.Component

@Keith-关于

儿童

，谢谢。尽管他们可能要求它只是一个字符串，但因为

ReactNode

是一个联合体，联合体中的一个东西是

字符串

，他们可以缩小它的范围。：-@Keith-这是一个提出的非常好的观点。：-）@T.J.Crowder等人。-感谢您澄清了如何分解一系列参数。我在其他线程中看到了一些示例，但显然被误解了。

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

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