TypeScript support #325
Description
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
}
}
}