How to define TypeScript type for object wrapper that has string as a key & React SFC as a value?

Question

Following is the Form component

import React from 'react';
import { Elements } from '@helpers/ImportProxy';
import { mockApi } from '@constants/api';

type Props = {
  // formValues: any
};

type MapKindToComponentT = {
  [key: string]: React.SFC
}

/** @component */
export const Form: React.SFC<Props> = __props => {
  const renderQuestions = () =>
    mockApi.map(
      (question, index): React.ReactElement | undefined => {
        const mapKindToComponent: MapKindToComponentT = {
            radio:        Elements.RadioElement,
            text:         Elements.InputElement,
            email:        Elements.InputElement,
            url:          Elements.InputElement,
            checkbox:     Elements.CheckBoxElement,
            dropdown:     Elements.SelectElement,
            textarea:     Elements.TextareaElement,
        };
        if(mapKindToComponent[question.kind]) {
          const Element = mapKindToComponent[question.kind];
          return <Element key={index} question={question} />;
        }
      }
    );

  return (
    <form>
      {renderQuestions()}
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  );
};

export default Form;

Value of each key of mapKindToComponent is React functional component.

Following is the error I get for it's currently defined type. Works fine with any.

Type error: Type 'FunctionComponent' is not assignable to type 'FunctionComponent<{}>'. Types of property 'propTypes' are incompatible. Type 'WeakValidationMap | undefined' is not assignable to type 'WeakValidationMap<{}> | undefined'. Type 'WeakValidationMap' is not assignable to type 'WeakValidationMap<{}>'. Type '{}' is not assignable to type 'Props'. TS2322

Karol Majewski · Accepted Answer · 2019-03-06 02:07:05Z

5

Solution

Make it explicit that MapKindToComponentT accepts function components of any kind.

type MapKindToComponentT = {
  [key: string]: React.SFC<any>
}

Explanation

The default type parameter (the one that describes Props) for React.SFC defined in @types/react is {}.

type SFC<P = {}> = FunctionComponent<P>;

If a component expects some more precise type as its props, for example { foo: string }:

declare const SomeComponent: React.SFC<{ foo: string }>;

such a component will not be assignable to React.SFC.

const MyComponent: React.SFC = SomeComponent;      // ⛔️ Compile-time error
const MyComponent: React.SFC<any> = SomeComponent; // ✅ OK

edited Mar 6, 2019 at 2:07

answered Mar 6, 2019 at 2:00

Karol Majewski

26.2k9 gold badges53 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ishan Patel Over a year ago

Ah it was only missing last bit! Thank you @Karol

Collectives™ on Stack Overflow

How to define TypeScript type for object wrapper that has string as a key & React SFC as a value?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related