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

admin管理员组

文章数量:1326311

Following is the Form ponent

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

type Props = {
  // formValues: any
};

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

/** @ponent */
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 ponent.

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 inpatible. 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

Following is the Form ponent

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

type Props = {
  // formValues: any
};

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

/** @ponent */
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 ponent.

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 inpatible. 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

• javascript
• reactjs
• typescript
• jsx
• object-literal

Share Improve this question Follow edited Mar 6, 2019 at 2:02 Ishan Patel asked Mar 6, 2019 at 1:47 Ishan PatelIshan Patel 6,0911212 gold badges5151 silver badges7070 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Solution

Make it explicit that MapKindToComponentT accepts function ponents 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 ponent expects some more precise type as its props, for example { foo: string }:

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

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

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

本文标签：