如何将jsDoc与mobx-state-tree一起使用？

Question

我正尝试在我的mobx-state-tree应用程序中使用jsDoc，但是它没有以我想要的方式做出反应。

Visual studio代码没有显示相应类型的正确属性：

​

​

当涉及到重构和保持js代码无bug时，jsDoc是一个巨大的帮助！但是在这种情况下，我该如何利用它呢？

我找到了这个，但似乎没有人真正使用它：https://github.com/Feverqwe/mst-jsdoc-gen

我真的想知道其他开发者是如何处理这个问题的！

Answer 1

问题是您的jsDoc引用的不是类型的实例，而是类型本身。

试着这样做：

/**
 * @param {typeof Step.Type} step
 */
async applyStep(step){}

或者这样(正如docs的typescript部分所指出的那样)：

/**
 * @param {Instance<typeof Step>} step
 */
async applyStep(step){}

Answer 2

您的项目可能缺少defines it to be a Javascript project to Visual Studio Code的jsconfig.json。

例如，给定项目树

.
├── jsconfig.json
├── package-lock.json
├── package.json
├── src
│   ├── step.js
│   └── test.js
└── yarn.lock

在jsconfig.json中定义如下，

{
    "compilerOptions": {
      "module": "commonjs",
      "target": "es6"
    },
    "include": ["src/**/*"],
    "checkJs": true,
    "allowSyntheticDefaultImports": true
}

allowSyntheticDefaultImports配置非常重要，因为它允许代码提示未在项目的Javascript模块中导出的符号。

​

​

要获取mobx状态树模型的类型提示，可以显式地记录typedef。例如,

import { types } from "mobx-state-tree"


const Step = types.model({
    level: types.number,
    strength: types.number
})

 /**
 * @typedef Step
 * @property {Number} level
 * @property {Number} strength
 */

​

​

我认为可以更进一步，编写一个钩子，为模型动态生成这个typedef文档。

我还不知道有什么工具可以立刻做到这一点。

您可以派生您共享的工具，更新它，然后在模型更新时使用configure a custom task in Visual Studio Code to run it。