typescript 根据现有子属性创建父HOC prop 类型

wlp8pajw 于 2023-02-20 发布在 TypeScript

关注(0)|答案(1)|浏览(169)

我正在为@expo/vector-icons做一个高阶组件（HOC），并尝试定义它的属性的通用类型。模块中有几个图标源components（MaterialCommunityIcons，MaterialIcons，FontAwesome等），它们都有相同的形状，但都有唯一的字符类型的图标names。
因此，HOC应该得到两个 prop ：source component和icon的name，其思想是，当定义了component时，name属性应该推断出所选源的可用名称的适当列表。

const IconLibs = { MaterialCommunityIcons, MaterialIcons, FontAwesome };

type IconLibsNames = keyof typeof IconLibs;

type HocProps<Key extends IconLibsNames> = {
    component: typeof IconLibs[Key];
    name: React.ComponentProps<typeof IconLibs[Key]>["name"];
};

在我的结果中我看到，所有的names都聚集在总列表中，并且它们都可用于每个源component。如何正确地拆分它们？
如果有帮助的话，可以通过两种方式获取适当的component的names的文本类型（例如，"stop" | "forward" | "check" | "close" | "book" ...）：
1.

type name = React.ComponentProps<typeof MaterialIcons>["name"]

type name = keyof typeof MaterialIcons.glyphMap

typescript

来源：https://stackoverflow.com/questions/75486034/create-type-for-parent-hoc-props-depending-on-existing-child-properties

1条答案

按热度按时间

euoag5mw1#

我认为问题是您试图使用generic + typeof来推断名称。我建议使用更直接的方法：

const IconLibs = { MaterialCommunityIcons, MaterialIcons, FontAwesome };

type IconComponent = typeof IconLibs[keyof typeof IconLibs]

type HocProps<TComponent extends IconComponent> = {
    component: TComponent;
    name: React.ComponentProps<TComponent>['name']
};

const hoc = <TComponent extends IconComponent>({name, component}: HocProps<TComponent>) => {
  // implementation of hoc
}

hoc({component: FontAwesome, name: '...'}) // `name` will be inferred from the FontAwesome

赞(0）回复(0）举报 2023-02-20

我来回答

typescript 根据现有子属性创建父HOC prop 类型

1条答案

相关问题

热门标签

最新问答