TypeScript support

[thebuilder]

Let's get react-docgen working with TypeScript. What will it take?
recast added support for TypeScript in 2018, and from #316 it looks like @jquense has been working on getting the parser integrated with react-docgen.

I haven't worked with recast, and I'm not sure how different the output is between Flow and TS.
But the the actual types are very similar. Here's the example from the Readme in TypeScript.
The only real change i did was changing subvalue: ?boolean to subvalue: boolean | null, which seems like the way to make values nullable.

Input

import React, { Component } from 'react';

type Props = {
  /** Description of prop "foo". */
  primitive: number
  /** Description of prop "bar". */
  literalsAndUnion: 'string' | 'otherstring' | number
  arr: Array<any>
  func?: (value: string) => void
  noParameterName?: string => void
  obj?: { subvalue: boolean | null }
};

/**
 * General component description.
 */
export default class MyComponent extends Component<Props> {
  render() {
    // ...
  }
}

Output

All flow types are currently exported under their own key "flowType". Following this structure, it would seem obvious to just add a new "typeScript" key?

{
  "description":"General component description.",
  "props":{
    "primitive":{
      "typeScript":{ "name":"number" },
      "required":true,
      "description":"Description of prop \"foo\"."
    },
    "literalsAndUnion":{
      "typeScript":{
        "name":"union",
        "raw":"'string' | 'otherstring' | number",
        "elements":[
          { "name":"literal", "value":"'string'" },
          { "name":"literal", "value":"'otherstring'" },
          { "name":"number" }
        ]
      },
      "required":true,
      "description":"Description of prop \"bar\"."
    },
    "arr":{
      "typeScript":{
        "name":"Array",
        "elements":[
          { "name":"any" }
        ],
        "raw":"Array<any>"
      },
      "required":true
    },
    "func":{
      "typeScript":{
        "name":"signature",
        "type":"function",
        "raw":"(value: string) => void",
        "signature":{
          "arguments":[
            { "name":"value", "type":{ "name":"string" } }
          ],
          "return":{ "name":"void" }
        }
      },
      "required":false
    },
    "noParameterName":{
      "typeScript":{
        "name":"signature",
        "type":"function",
        "raw":"string => void",
        "signature":{
          "arguments":[
            { "name":"", "type":{ "name":"string" } }
          ],
          "return":{ "name":"void" }
        }
      },
      "required":false
    },
    "obj":{
      "typeScript":{
        "name":"signature",
        "type":"object",
        "raw":"{ subvalue: ?boolean }",
        "signature":{
          "properties":[
            {
              "key":"subvalue",
              "value":{
                "name":"boolean",
                "nullable":true,
                "required":true
              }
            }
          ]
        }
      },
      "required":false
    }
  }
}

[danez]

Maybe it would also be possible to remove recast all together. The only reason why we use recast I guess is because we print some of the input code into the raw fields. see also #237.

But anyway typescript support would be nice and I think @jquense wanted/is working on that.

[fkling]

I'm all for reducing the number of dependencies, but we also use recast's ability to resolve identifiers to their value expressions, i.e.

https://github.com/reactjs/react-docgen/blob/master/src/utils/resolveToValue.js#L156

It would be good to compare the differences between the Typescript and Flow ASTs. I'd assume that recast provides some abstraction over them, but not sure.

[jquense]

Recast traditional my makes stuff like resolveToValue easier than straight Babel, but the current babel API is better nowadays. Nodes have a .resolve that do the heavy lifting of binding traversal. And even without it I've written pure Babel versions a few times so I'd be happy to help there.

Honestly I'd like to remove recast, if only because it avoids a context shift between AST tools I use regularly :P

As for typescript I do think recast is probably abstracting the differences, the plain AST from babel attempts to match the actual typescript AST nodes for annotations which are fairly different from flows

[devongovett]

I am working on TypeScript support here: #348. If you're interested in helping out with testing, please feel free to leave feedback on the PR!