redux connect 隐藏基本组件的JSDoc答案

【问题标题】：redux connect hides the JSDoc of basic componentredux connect 隐藏基本组件的JSDoc
【发布时间】：2020-04-23 23:29:56
【问题描述】：

我有一些组件，为此我编写了一些 JSDOC：

/**
 * random jsdoc
 */
const Test = () => {
  return;
}

现在我可以在项目中使用此组件的任何位置看到此 JSDOC（当然，使用 JSDOC 支持的编辑器）。

只要这个 Test 组件连接到 redux 存储，这个 JSDOC 就会消失。我知道这是因为它创建了一个与实际组件不同的高阶组件。从概念上讲，它本质上是相同的组件，我们希望使用 JSDOC 来表达细节。有没有办法在使用高阶组件后传播 JSDOC？

【问题讨论】：

如果将jsdoc添加到连接组件会怎样？

标签： reactjs react-redux jsdoc higher-order-components

【解决方案1】：

如果您确定您的 Duck 仍然是 Duck（如果只是在功能上），那么您可以通过将返回的对象转换为 Duck 来告诉您的 JSDocs 解析器。

/**
 * I'm a Duck and I go "Quack!" (by default).
 */
class Duck {
  constructor () {
    this.quack = "Quack!";
  }
}

const duck = new Duck();
const newDuck = /** @type {Duck} */ (duckModifyingMiddleware(duck));
console.log(newDuck.quack, newDuck.quack, newDuck.quack);

如果duckModifyingMiddleware 有可能返回与Duck 不安全的内容，您应该以不同的方式处理此问题，例如手动检查对象的类型以获取指示符；

const duck = new Duck();
let newDuck = (duckModifyingMiddleware(duck);
if (newDuck.quack) {
  newDuck = /** @type {Duck} */ (newDuck);
  console.log(newDuck.quack, newDuck.quack, newDuck.quack);
} else {
  console.log('It did not look like a duck, it did not quack like a duck');
}

【讨论】：