flagsmith-js-client icon indicating copy to clipboard operation
flagsmith-js-client copied to clipboard

React useFlags type issues with union type

Open Heenkkk opened this issue 8 months ago • 1 comments

flagsmith: 9.2.2 typescript: 5.8.3

I'm testing out Flagsmith for the first time and I'm getting some type errors when providing more than 1 flag at a time while relying on either inference or a type union. Defining the types via an interface works fine.

interface ThisWorks {
  show_alert: null;
  test: boolean;
}

type ThisDoesNotWork = "show_alert" | "test";

type OneWorks = "show_alert";

type Traits = "trait_1" | "trait_2";

// 
const flags = useFlags<ThisDoesNotWork, Traits>(
  ["show_alert", "test"],
  ["trait_1", "trait_2"],
);

flags.show_alert;
flags.test;
flags.trait_1;
flags.trait_2;

I get these kinds of errors on both flags.show_alert and flags.test when using useFlags<ThisDoesNotWork, Traits>(...) or useFlags(...):

Property 'show_alert' does not exist on type '({ show_alert: IFlagsmithFeature<string | number | boolean | null>; } & { trait_1: IFlagsmithTrait; trait_2: IFlagsmithTrait; }) | ({ ...; } & { ...; })'.
Property 'show_alert' does not exist on type '{ test: IFlagsmithFeature<string | number | boolean | null>; } & { trait_1: IFlagsmithTrait; trait_2: IFlagsmithTrait; }'. (ts 2339)

When using ThisWorks, everything works well. When using only one feature with OneWorks, everything works well.

Heenkkk avatar Jun 16 '25 11:06 Heenkkk

Hi @Heenkkk, I encourage you to use Record type for typing flags for now, if that's possible. Thank you for raising that issue.

tiagoapolo avatar Jun 16 '25 21:06 tiagoapolo