字符串联合的打字稿并发症

Question

我正在尝试创建一个根据 name 属性返回 JSX 的函数。 这是我的代码：

function TabBarIcon(props: {
  name:
    | React.ComponentProps<typeof Ionicons>['name'] // 'key' | 'item' | 2000 more...
    | React.ComponentProps<typeof Feather>['name']; // 2000 different strings...
  color: string;
  type: 'Ionicons' | 'Feather';
}) {
  if (props.type === 'Ionicons')
    return <Ionicons size={30} style={{ marginBottom: -3 }} {...props} />;
  else if (props.type === 'Feather')
    return <Feather size={30} style={{ marginBottom: -3 }} {...props} />;
  else return <View />;
}

TypeScript 会引发错误，因为它不能确定 <Ionicons /> 和 <Feather /> 组件是否包含名称。我试图用 props.type 来解决这个问题，但 TypeScript 仍然会引发错误。如何在没有错误的情况下返回正确的组件？谢谢！

Answer 1

看起来Ionicons 有超过 3,000 个名称，而 Feather 有更多的 300 个名称。如果我使用 type="Feather" 和仅存在于 Ionicons 上的名称调用您的组件会怎样？

您的组件是这样键入的，如果name 存在于Ionicons 或Feather 上，则它是一个有效的道具。但这还不够好。我们需要知道图标存在于所选图标集上。

将 props 定义为 union 将使错误消失。

function TabBarIcon(props: { 
  color: string;
} & (
  {
    name: React.ComponentProps<typeof Ionicons>['name'];
    type: 'Ionicons';
  } | {
    name: React.ComponentProps<typeof Feather>['name'];
    type: 'Feather';
})) {
  if (props.type === 'Ionicons')
    return <Ionicons size={30} style={{ marginBottom: -3 }} {...props} />;
  else if (props.type === 'Feather')
    return <Feather size={30} style={{ marginBottom: -3 }} {...props} />;
  else return <View />;
}