Merge pull request #311 from Flagsmith/fix/use-flags-typing

fix: added-key-of-generic-record-and-tests

Author: Zaimwa9

react.d.ts

@@ -26,7 +26,7 @@ export declare const FlagsmithProvider: FC<FlagsmithContextType>;
 export declare function useFlags<
     F extends string | Record<string, any>,
     T extends string = string
->(_flags: readonly F[], _traits?: readonly T[]): UseFlagsReturn<F, T>;
+>(_flags: readonly (F | keyof F)[], _traits?: readonly T[]): UseFlagsReturn<F, T>;
 export declare const useFlagsmith: <F extends string | Record<string, any>,
     T extends string = string>() => IFlagsmith<F, T>;
 export declare const useFlagsmithLoading: () => LoadingState | undefined;

react.tsx

@@ -158,7 +158,7 @@ export function useFlags<
     F extends string | Record<string, any>,
     T extends string = string
 >(
-    _flags: readonly F[], _traits: readonly T[] = []
+    _flags: readonly (F | keyof F)[], _traits: readonly T[] = []
 ){
     const firstRender = useRef(true)
     const flags = useConstant<string[]>(flagsAsArray(_flags))

test/react-types.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {render} from '@testing-library/react';
 import {FlagsmithProvider, useFlags, useFlagsmith} from '../lib/flagsmith/react';
 import {getFlagsmith,} from './test-constants';
+import { IFlagsmithTrait } from '../types';
 
 
 describe.only('FlagsmithProvider', () => {
@@ -51,13 +52,16 @@ describe.only('FlagsmithProvider', () => {
     });
     it('should allow supplying interface generics to useFlags', () => {
         const FlagsmithPage = ()=> {
-            const typedFlagsmith = useFlags<
-                {
-                    stringFlag: string
-                    numberFlag: number
-                    objectFlag: { first_name: string }
-                }
-            >([])
+            interface MyFeatureInterface {
+                stringFlag: string
+                numberFlag: number
+                objectFlag: { first_name: string }
+            }
+            const typedFlagsmith = useFlags<MyFeatureInterface>(["stringFlag", "numberFlag", "objectFlag"])
+            
+            // @ts-expect-error - feature not defined 
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const wrongTypedFlagsmith = useFlags<MyFeatureInterface>(["non-existing-flag"])
             //@ts-expect-error - feature not defined
             typedFlagsmith.fail?.enabled
             //@ts-expect-error - feature not defined
@@ -72,11 +76,11 @@ describe.only('FlagsmithProvider', () => {
             //eslint-disable-next-line @typescript-eslint/no-unused-vars
             const numberFlag: number = typedFlagsmith.numberFlag?.value
             //eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const firstName: string = typedFlagsmith.objectFlag?.value.first_name
+            const firstName: string = typedFlagsmith.objectFlag?.value?.first_name
 
             // @ts-expect-error - invalid does not exist on type announcement
             //eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const invalidPointer: string = typedFlagsmith.objectFlag?.value.invalid
+            const invalidPointer: string = typedFlagsmith.objectFlag?.value?.invalid
 
             // @ts-expect-error - feature should be a number
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -92,4 +96,30 @@ describe.only('FlagsmithProvider', () => {
             </FlagsmithProvider>
         );
     });
+    it('should allow supplying string type to useFlags', () => {
+        const FlagsmithPage = ()=> {
+            type StringTypes = "stringFlag" | "numberFlag" | "objectFlag"
+            const typedFlagsmith = useFlags<StringTypes>(["stringFlag", "numberFlag", "objectFlag"])
+            
+            // @ts-expect-error - feature not defined 
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const wrongTypedFlagsmith = useFlags<StringTypes>(["non-existing-flag"])
+
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const stringFlag: IFlagsmithTrait = typedFlagsmith.stringFlag
+            //eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const numberFlag: IFlagsmithTrait = typedFlagsmith.numberFlag
+            //eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const firstName: IFlagsmithTrait = typedFlagsmith.objectFlag
+
+            return <></>
+        }
+        const onChange = jest.fn();
+        const {flagsmith,initConfig, mockFetch} = getFlagsmith({onChange})
+        render(
+            <FlagsmithProvider flagsmith={flagsmith} options={initConfig}>
+                <FlagsmithPage/>
+            </FlagsmithProvider>
+        );
+    });
 });