flag icon indicating copy to clipboard operation
flag copied to clipboard

Proper typing of components that use flags as parameters

Open mugwump opened this issue 1 year ago • 0 comments

I want to have a simple helper compent, that evaluates a flag and then either shows or hides its children, something like: <OptionalContent flag={["hideFeature"]}><HideThisComponent /></OptionalContent>

How can I properly type these props? I tried out several variants of

type OptionalContentProps =
  | {
      flag: KeyPathString<MyFlags>[];
      
      show: true;
      hide?: false | undefined | null;
    }
  | {
      flag: KeyPathString<MyFlags>[];
      show?: false | undefined;
      hide: true;
    };

but can't get this to work: Inside the component, I use useFlag(flag) to evaluate the flag, so I basically need to reproduce the type that useFlag is using.

And the types used inside the lib like KeyPathString are not exported, so I had to re-write them: I am probably doing something basic wrong here, so any hint is appreciated!

mugwump avatar Sep 26 '24 09:09 mugwump