React Javascript - Visual Studio Code 不会自动完成对象属性答案

【问题标题】：React Javascript - Visual Studio Code doesn't auto-complete object propertiesReact Javascript - Visual Studio Code 不会自动完成对象属性
【发布时间】：2021-04-02 00:30:25
【问题描述】：

我有一个 React HOC，可以将一个类的实例传播给子级。

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;

现在，如果我在其中一个孩子中开始编码，我的代码编辑器 (VS Code Studio) 不会显示对象的属性。

当我执行props.obj. 时，编辑器不会显示对象内部的所有内容。

相反，如果我直接执行 const obj = new Obj()，我可以看到它们。

这是为什么呢？是否无法查看从 HOC 传播并通过 props 接收的对象内部的数据？

有什么解决方法吗？

谢谢。

【问题讨论】：

这听起来像是我最近遇到的问题之一。我找到了一种解决方法，但我不确定它是否适合您。 stackoverflow.com/questions/66784130/…
你在使用 TypeScript 吗？ VSCode 无法知道 props.obj 的属性是什么，除非您有明确声明它们的方法。 JSDoc cmets 可能是另一种选择。
@jered 不，我没有使用打字稿。将尝试 JSDoc。这东西很烂，因为我的对象真的很复杂
如果可以的话，拥抱 TypeScript。上手真的不难，你可以将它混入现有的 vanilla JS 代码库中。
@jered 你知道在一周内获得专业打字员的任何好的和完整的教程吗？

标签： javascript reactjs react-native

【解决方案1】：

正如 cmets 中所说，这里真正的答案是 TypeScript。要查看您的 vs 代码编辑器对 typescript 的反应，您可以快速执行以下操作：

// 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 的 vs 代码会咆哮说类型在 .js 文件中不符合条件，而您需要 .tsx 代替，但为了了解 TS 如何帮助自动完成，它的很好。

【讨论】：