反应 Javascript - Visual Studio 代码不会自动完成 object 属性

Question

I have a React HOC that propagate an instance of a class to the children.

import React from "react";

import ObjContext from "../../context/Obj/ObjContext";

const withObj = (Component) => (props) => (
  <ObjContext.Consumer>
    {(obj) => <Component {...props} obj={obj} />}
  </ObjContext.Consumer>
);

export default withObj;

Now, if in one of the child, I start coding, my code editor (VS Code Studio) doesn't display the properties of the object.

When I do props.obj. the editor doesn't show me all the stuff which is inside the object.

Instead, if I do const obj = new Obj() directly, I can see them.

Why is that? Is impossible to see the data which is inside the object that is propagated from a HOC and received via props?

Any workaround?

Thank you.

Answer 1

As said in the comments, the real answer here is TypeScript. To see how your vs code editor would react with typescript, you can quickly do:

// Inside child component:
import Obj from 'path/to/obj'
...
export class ChildComponent extends React.Component {
    this.obj: Obj;
    constructor(props) {
        super(props);
        this.obj = this.pros.obj;
        this.obj.something() // something would be proposed by ide
    }
...
}

(Ofc the vs code will growl saying that types are not eligible in a.js file and you'd need.tsx instead, but for the purpose of taking a look at how TS would help with the auto-completion, its fine.