如何在 TypeScript 中定义接口以正确传递道具？答案

【问题标题】：How to define interfaces in TypeScript to pass the props correctly?如何在 TypeScript 中定义接口以正确传递道具？
【发布时间】：2021-06-20 01:42:01
【问题描述】：

我有一个简单的组件来呈现徽标文本

interface AppBarLogoProps = {
  logo: string;
};

export const AppBarLogo: FC<AppBarLogoProps> = ({ logo }) => {
  return (
    <>
      <h1>
        {logo}
      </h1>
    </>
  );
};

还有比下面更复杂的 AppBarTop 组件，但我的想法是我想将 logo 道具从 AppBarTop 传递给 AppBarLogo。

问题是我必须使用 logo.logo 表示法。我应该如何定义接口以使用return <AppBarLogo logo={logo} /> 而不是return <AppBarLogo logo={logo.logo} />？

interface AppBarTopProps {
  logo: AppBarLogoProps;
}

export const AppBarTop: FC<AppBarTopProps> = ({ logo }) => {
   return <AppBarLogo logo={logo.logo} />
}

【问题讨论】：

你的回答很好，谢谢！

标签： javascript reactjs typescript interface react-props

【解决方案1】：

你可以使用 TypeScript 交集&:

interface AppBarLogoProps {
  logo: string;
};

interface AppBarTopProps {
  foo: string
}

export const AppBarTop: React.FC<AppBarTopProps & AppBarLogoProps> = ({ logo, foo }) => {
  return <AppBarLogo logo={logo} />
}

另外，您可能应该 not use FC 并简单地使用函数：

export const AppBarTop2 = ({ logo, foo }: AppBarTopProps & AppBarLogoProps) => {
  return <AppBarLogo logo={logo} />
}

【讨论】：

【解决方案2】：

喜欢这样吗？

interface AppBarTopProps extends AppBarLogoProps {
    // other properties
}

export const AppBarTop: FC<AppBarTopProps> = (props) => {
   return <AppBarLogo {...props} />
}

【讨论】：

好的，但是如果我有 3 个像 AppBarLogoProps 这样的接口，例如：AppBarLogoProps、AppBarLinks、AppBarButtons，我可以扩展 3 个接口吗？
没有中间接口 - 没有。您还可以在“type AppBarTopProps = AppBarLogoProps & OtherProps.”中使用 type s。所以从技术上讲它是可行的，但是您将来可能会遇到一个问题 - 如果您的某些组件将具有相同名称的属性怎么办？