Typing error for typescript

[xiongemi]

I was trying to include Feature for my tsx file; however, my code editor shows me a typing error.

code:

<Feature
            name="country"
            inactiveComponent={<Loading />}
            activeComponent={<Loading />}
          />

Error:

No overload matches this call.
  Overload 1 of 2, '(props: { children: (args: { features: FeatureNames; }) => Element; }): Element', gave the following error.
    Type '{ name: string; inactiveComponent: Element; activeComponent: Element; }' is not assignable to type 'IntrinsicAttributes & { children: (args: { features: FeatureNames; }) => Element; }'.
      Property 'name' does not exist on type 'IntrinsicAttributes & { children: (args: { features: FeatureNames; }) => Element; }'.

[karol-majewski]

Better definition

export function Feature(props: { inactiveComponent?: Component; activeComponent: Component; name: keyof ApplicationFeature }): JSX.Element;
export function Feature(props: { children: (args: { features: FeatureNames }) => JSX.Element }): JSX.Element;

Better yet (because it's augmentable)

export interface Feature {
  (props: { inactiveComponent?: Component; activeComponent: Component; name: string }): JSX.Element;
  (props: { children: (args: { features: FeatureNames }) => JSX.Element }): JSX.Element;
}

export const Feature: Feature;

Best (allows the user to use their own string literals)

export interface Feature {
  (props: { inactiveComponent?: Component; activeComponent: Component; name: keyof ApplicationFeature }): JSX.Element;
  (props: { children: (args: { features: FeatureNames }) => JSX.Element }): JSX.Element;
}

export const Feature: Feature;

export interface ApplicationFeature {}

In your app:

import { FeatureFlag } from 'someplace/in/the/app';

declare module '@paralleldrive/react-feature-toggles' {
  export interface ApplicationFeature extends Record<FeatureFlag, unknown> {}
}

[ExeAy]

In later versions of react, SFC and StatelessComponent are deprecated. Meaning that typescript will not identify the correct Feature type you want if you have functional components. I therefore suggest that you replace this

type Component = ComponentClass | SFC<any> | StatelessComponent;

  export function Feature(props: {
    children: (args: { features: FeatureNames }) => JSX.Element;
  }): JSX.Element;

  export function Feature(props: {
    inactiveComponent?: Component;
    activeComponent: Component;
    name: string;
  }): JSX.Element;

to

type Component = ComponentClass | FunciontComponent;

  export function Feature(props: {
    children: (args: { features: FeatureNames }) => JSX.Element;
  }): JSX.Element;

  export function Feature(props: {
    inactiveComponent?: Component;
    activeComponent: Component;
    name: string;
  }): JSX.Element;

in your index.d.ts file. I can create a PR in order to speed things a long 😃 .