Typescript: Improving IntelliSense for React Components in JavaScript

[mjbvz]

From: https://github.com/Microsoft/vscode/issues/24926

Problem
For a simple react component defined in a JavaScript file:

class MyComponent extends Component {
    render() {
       ...
    }
}

I was unable to figure out how to get proper intellisense inside of Component. Specific problems:

• No suggestions for members of Component provided inside of MyComponent when typing this.
• No way to specify the type of props or state using jsdocs.

https://github.com/Microsoft/vscode/issues/24926 suggested that we use the PropTypes object for IntelliSense. I'm not sure this is feasible, although someone could probably write a TSServer plugin to do this.

However, I also wasn't able to write a jsdoc that provides proper IntelliSense here. Is there any way to do this currently?

[arackaf]

I may be missing something obvious, but why would using propTypes not be feasible? Why would

static propTypes = {
    x: PropTypes.string,
    y: PropTypes.number,
    submoduleStore: PropTypes.instanceOf(store)
}

inside a class not be doable to infer type bindings for this.props.

[mjbvz]

Someone on the TypeScript team may be able to speak to this better, but I don't think we can pick up types from a static property like that. A TypeScript server extension may be able to enrich TypeScript's knowledge of the component however

[arackaf]

I guess I'm speaking more on the VS Code side, than TypeScript. I'm not sure if VS Code does any sort of type inference on its own, or it's just limited to what TypeScript would do.

I can see why TypeScript wouldn't bake in React support to their language; I had just assumed VS Code would be able to, assuming the file is javascriptreact or typescriptreact, be able to sniff out propTypes on a class component definition.

But no complaints - we're really loving VS Code :)

[mhegazy]

You could use @augments to specify the propTypes as well as the type of the state for a react component. for instance:

/**
 * @augments {Component<{x: string, y:number}}, State>}
 */
class MyComponent extends Component {
...
}

Now the type of this.props should be {x: string, y: number} and the type of of this.sate should be State.

As for bake-in inferences for react, we have always shied away from baking-in any type inferences for frameworks. we believe a better approach is to add more power to the language to allow users to explicitly declare their intent, hence the @augments support.

[arackaf]

@mhegazy thank you SO much. Worked like a charm!

btw I definitely don't think TypeScript should bake in React stuff - that comment should have been made on the VS Code issue, not here. Apologies, and thanks again!

[mjbvz]

Closing since I believe the original question has been answered

[Alphapage]

I tried this workaround, but it doesn't seem to work with such a syntax:

export default withStyles(styles)( 
class MyComponent extends Component {

}
)

I tried:

/**
 * @augments {Component<{x: string, y:number}}, State>}
 */
export default withStyles(styles)( 
class MyComponent extends Component {

}
)

or

export default withStyles(styles)( 
/**
 * @augments {Component<{x: string, y:number}}, State>}
 */
class MyComponent extends Component {

}
)

without success.