I am making a reusable component for expo-vector-icons
. This is the interface so far.
import { AntDesign, Entypom, Feather } from "@expo/vector-icons";type AppIconFamilies = { AntDesign: typeof AntDesign; Entypo: typeof Entypo;}export interface AppIconProps { family?: keyof AppIconFamilies; name?: React.ComponentProps<typeof AntDesign | typeof Entypo>["name"];}
I wanted to generate props for the same with typescript. But I see that I am duplicating the name
field in AppIconProps
interface. Is there any way to remove this duplication?
Basically, right now AntDesign
and Entypo
are there in the name
field of AppIconProps
interface. Suppose I want to also add Feather
icons (which I imported on the top), so to add that what I will do is,
name?: React.ComponentProps<typeof AntDesign | typeof Entypo>["name"] | typeof Feather>["name"];
As you can see this does not look good, so is there any other way to write this interface?So that the name field should depend upon the family
field?