Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Add example : how to extract Props / State interface from react component using compiler API

Open
#65 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
35/100
Issue type
Documentation
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
documentation

Research direction

Start with the linked TypeScript Compiler API wiki example and the shown React.Component generic usage. Add a wiki example demonstrating extraction of the first generic type and showing the expected output for MyComponent; done means the example clearly answers the requested Props/State extraction.

Written by the indexing model from the issue text.

Description

Hello.
I have this sources

import * as React from 'react';

export interface MyComponentProps{
    prop1: number;
    prop2: string;
}
/**
* descriptions for component
*/
export  class MyComponent extends React.Component<MyComponentProps,{}>{
   render(){
     return(
       <div>
       </div>
     );
   }
}

I use docgen from this wiki example

this is output

[
    {
        "name": "MyComponent",
        "documentation": "descriptions for component",
        "type": "typeof MyComponent",
        "constructors": [
            {
                "paramters": [],
                "returnType": "MyComponent",
                "documentation": ""
            }
        ]
    }
]

I want to extend this output by type of first generic passed to react.component.

How to extract generic type passed to parent class?
Thank you!

Dominant language
JavaScript
Stars
759
Forks
315
PR merge metrics
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/TypeScript-wiki

All issues in microsoft/TypeScript-wiki

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.