reactjs / reactjs/react-docgen

Typescript: Component props not parsed with 'call signature' type

Ouverte
#897 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

typescript
Langage dominant
TypeScript
Étoiles
3.8k
Forks
316
Merge moyen
5 h 7 min
PR mergées (30 j)
4

Description

Description

In Typescript, it's possible to type a function using a call signature.

For example, this is valid TS:

interface A {
  foo: string;
}

type FnType = (props: A) => string;

const Fn1: FnType = (props) => props.foo; // valid
const Fn2 = (props: A) => props.foo; // also valid

See example in TS Playground

In the above example, react-docgen generates types for Fn2, but does not generate types for Fn1 which is defined with a call signature type.

Expected Behavior

This code:

// component.tsx
interface A {
  foo: string;
}

type ComponentType = (props: A) => JSX.Element;

const Component1: ComponentType = (props) => <div />; // does not include generated props
const Component2 = (props: A) => <div />; // includes generated props

Produces this output:

[
  {
    "description": "",
    "displayName": "Component1",
    "methods": [],
    "props": {
      "foo": {
        "required": true,
        "tsType": {
          "name": "string"
        },
        "description": ""
      }
    }
  },
  {
    "description": "",
    "displayName": "Component2",
    "methods": [],
    "props": {
      "foo": {
        "required": true,
        "tsType": {
          "name": "string"
        },
        "description": ""
      }
    }
  }
]

Actual Behavior

The same code produces this output:

[
  {
    "description": "",
    "displayName": "Component1",
    "methods": []
  },
  {
    "description": "",
    "displayName": "Component2",
    "methods": [],
    "props": {
      "foo": {
        "required": true,
        "tsType": {
          "name": "string"
        },
        "description": ""
      }
    }
  }
]

Steps to Reproduce

Paste the .tsx sample code from the "Expected Behavior" section in the react-docgen playground with Language set to Typescript.

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par reproduire l’exemple .tsx dans le playground de react-docgen avec Language défini sur Typescript, en comparant Component1 et Component2. Suivez le point d’entrée de l’analyse TypeScript pour les composants auxquels est attribué un type de signature d’appel ; c’est terminé lorsque Component1 inclut les mêmes métadonnées de prop foo que Component2.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react, typescript
Domaine
documentation, tooling
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.