reactjs / reactjs/react-docgen
Typescript: Component declaration reference is not recognized by parser
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 3.8k
- Forks
- 316
- Ø Merge
- 5 Std. 7 Min.
- Gemergte PRs (30 T.)
- 4
Beschreibung
Description
Many Typescript libraries publish types in declaration files (.d.ts) alongside their associated .js bundles. In .d.ts files generated through TS compilation, function types are often defined using declaration references, such as:
declare const MyComponent: React.FunctionComponent<ComponentProps>;
Currently declaration references are not recognized by reactDocgen.parse(). When react-docgen parses a .d.ts file with a single declaration reference, it emits an error: Error: No suitable component definition found..
Desired Behavior
The following code:
import * as React from 'react';
interface ComponentProps {
foo: string;
}
/**
* My component is so darn cool!
*/
const Component1: React.FunctionComponent<ComponentProps> = () => <div />;
/**
* Mine too!
*/
declare const Component2: React.FunctionComponent<ComponentProps>;
Results in the following output:
[
{
"description": "My component is so darn cool!",
"displayName": "Component1",
"methods": [],
"props": {
"foo": {
"required": true,
"tsType": {
"name": "string"
},
"description": ""
}
}
},
{
"description": "Mine too!",
"displayName": "Component2",
"methods": [],
"props": {
"foo": {
"required": true,
"tsType": {
"name": "string"
},
"description": ""
}
}
}
]
Actual Behavior
The same code results in the following output:
[
{
"description": "My component is so darn cool!",
"displayName": "Component1",
"methods": [],
"props": {
"foo": {
"required": true,
"tsType": {
"name": "string"
},
"description": ""
}
}
}
]
Steps to Reproduce
Paste the .tsx sample code from the "Expected Behavior" section into the react-docgen playground with Language set to Typescript.
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne damit, das Problem im react-docgen-Playground zu reproduzieren, wobei Language auf Typescript gesetzt ist, das .tsx-Beispiel verwendet wird und reactDocgen.parse() für die Deklarationsreferenz aufgerufen wird. Verfolge den Parser-Einstiegspunkt für .d.ts-Deklarationen und vergleiche das Ergebnis mit der erwarteten Ausgabe, in der Component2 mit seiner Beschreibung, displayName, methods und props enthalten ist.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react, typescript
- Bereich
- devtools
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Klar beschrieben
- Anfängerfreundlichkeit
- 48/100