Try react-docgen-typescript

[typicode]

Currently only Flow and PropTypes are supported, but https://github.com/styleguidist/react-docgen-typescript (or other libs) may improve TypeScript support

[alexdriaguine]

I wanted to have a go at this and experimented a bit with react-docgen-typescript, but it seems it's a bit limited for composed interfaces as props.

Say I have props that look something like this

interface Address  {
  street: string,
  street2?: string,
  pincode: number
}

interface Commit {
  id: string,
  message: string
}

interface Repo  {
  url: string,
  demoSite?: string,
  npm?: string,
  commits: Array<Commit>
}

interface Person  {
  id: number,
  name: string,
  age: number,
  address: Address,
  family?: Array<number>,
  repos: Array<Repo>
}

interface Props  {
  person: Person
}

The information i get back from parsing the component is

{
  person: {
    defaultValue: null,
    description: '',
    name: 'person',
    parent: {
      fileName: 'react-fake-props/fixtures/typescript/Component.tsx',
      name: 'Props',
    },
    required: true,
    type: {name: 'Person'},
  },
}

No reference to the Person interfaces fields, just the name. So might want to look at other options or using typescript itself to grab the information. 🙂

[typicode]

Hi @alexdriaguine,

Thanks a lot for giving it a try and sharing 👍. Tried too and got the same results.
I guess for the moment TypeScript support will be postponed until there are progress in "docgen" tools.

[typicode]

Closing this issue as react-docgen seems to be able to extract information from TypeScript now as well.

[typicode]

See #18

[timini]

Might also be worth looking at https://github.com/google/intermock

[typicode]

Thanks @timini 👍 interesting, I din't know about this one.

[timini]

For typescript in the end I managed to generate a json schema from the interface using https://github.com/YousefED/typescript-json-schema then it is fairly simple to generate fake data from the json schema (ended up using json-schema-faker) if there was one package for this whole workflow it would make things a lot easier