Skip to content

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

Open
@isaac-y-baron

Description

@isaac-y-baron

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions