【问题标题】:JSDoc typedef in a separate fileJSDoc typedef 在一个单独的文件中
【发布时间】:2017-08-28 06:00:03
【问题描述】:

我可以在一个单独的文件中定义所有自定义类型(例如types.jsdoc),以便在整个应用程序中重复使用它们吗?正确的做法是什么?

/**
 * 2d coordinates.
 * @typedef {Object} Coordinates
 * @property {Number} x - Coordinate x.
 * @property {Number} y - Coordinate y.
 */

【问题讨论】:

  • 是的,你可以。您可能必须将@global 添加到定义中,或者尝试在 JSDoc 中命名空间的不同方法(令人困惑,恕我直言,并且出于我自己的目的,只有 WebStorm inlineinfo/help 和 HTML API 文档可以正常工作)。跨度>
  • 我在使用 Visual Studio Code 时遇到了同样的问题。我建议了这个answer,您可能会觉得有用。

标签: jsdoc


【解决方案1】:

您可以在模块中定义类型(例如typedefs.js)。该模块包含您的 JSDoc 类型定义,并且可以简单地导出未使用的属性。

// typedefs.js
/**
 * @typdef foo
 * @property {string} bar
 */

// etc.

exports.unused = {};

要使用它,请在需要引用这些 typdef 的地方导入模块:

const typedefs = require("./typedefs");
/** @type {typedefs.foo} */
const fb = { bar: "hello" };

您可能希望将typedefs.js 注释为@module@namespace。因为我使用“tsd-jsdoc”来生成一个types.d.ts 文件,并且由于 TypeScript 现在解释模块与命名空间的方式,所以我将我的 typedefs.js 文件注释为 @namespace 并将每个 typedef 记录为该命名空间的成员:

/**
 * @namespace typedefs
 */

/**
 * @typedef foo
 * @property {string} bar
 * @memberof typdefs
 */

希望对您有所帮助。

【讨论】:

  • 如果您使用 ES6 导入/导出,您可以使用 export {}; 不导出任何内容,同时仍将文件标记为模块。
【解决方案2】:

这是一个 TypeScript 风格的 JSDoc 特定答案,但我成功使用 triple-slash directive 从另一个文件“导入”所有类型。这样做的好处是不会实际添加未使用的 import,这会扰乱 linter 和 bundlers。

我将我的共享类型放在一个名为 typedefs.js 的文件中,如下所示:

// typedefs.js
/**
 * @typedef {Object} Foo
 * @property {string} bar
 */

/**
 * @typedef {Object} Baz
 * @property {number} buzz
 */

然后在其他文件中使用/// <reference path="typedefs.js" /> 来访问共享类型,如下所示:

// randomThing.js
/// <reference path="typedefs.js" />

/**
 * Turn a Foo into a Baz
 *
 * @param {Foo} a
 * @return {Baz}
export function (a) {
  return { buzz: a.bar.length };
}

但棘手的是,现在 typedefs.js 只是在评论中被引用,像 rollup 这样的打包工具完全错过了它。所以我将它与我的旧consts.js 结合起来,它导出了一些常量并至少在一个地方导入。这样,typedef 仍然包含在汇总输出中。

我希望其他人会觉得这很有帮助。

附言汇总将完全排除纯 JSDoc typedefs.js 文件_即使您有 import './typedefs.js' 因为摇树!必须使用 --no-treeshake 运行汇总以将这些 cmets 保留在汇总输出中。

【讨论】:

  • 好吧。也许我说得太早了。现在好像不行了,天哪。
  • 实际上这是对我有用的一个选项。 VSCode 1.44.0
  • 当我们对函数参数之一使用 typedef 时,它是否呈现在网页上。 @威廉希尔顿
  • 像魅力一样工作谢谢
【解决方案3】:

在 vscode 中,import('./path/to/types.js').def 标签可以正常工作。

例如
types.js

/**
 * @typedef {Object} connection
 * @property {String} id
 * @property {Number} pingRetries
 * @property {(data:Object) => void} sendJSON
 */
exports.unused = {};

还有someFile.js

/**
 * @param {import('./types').connection} param
 */
const someFunc = (param) => {}

另外,请注意exports.unused = {}types.js 文件中的必要,否则import('./types') 的自动导入将不起作用,您可能必须自己输入。

【讨论】:

    【解决方案4】:

    我刚刚尝试过使用 VSCode,它只有在编辑器中打开单独的文件时才有效。如果不是,则外部 typedef 类型为 any

    【讨论】:

    • 感谢您的评论。我很高兴看到我的类型被拾取并且我认为它来自工作区,但是当我按照你的建议关闭文件时它停止了。
    • 是的,这就是我刚刚发现的……你有没有找到解决方案?我已经尝试了几个小时没有运气。 ://
    【解决方案5】:

    我通常在我的项目中做类似的事情,不同的是我使用扩展名.js 来命名文件。 Webstorm 完美运行,能够很好地检查类型和自动完成。它无法识别.jsdoc 扩展名(我刚刚检查过),所以即使文件不包含任何代码语句,也要坚持.js

    【讨论】:

      【解决方案6】:

      我已经成功地在 typedefs.js 文件中创建了我的类型并使用 ts/vscode import(path/to/file).Foo 标记进行引用。 JSDoc 不支持这种开箱即用的语法,所以我建议也使用jsdoc-tsimport-plugin 来解析您的文档。

      例如:typedef.js:

      
      /**
       * @typedef {Object} Foo
       * @property {string} id
       */
      
      /**
       * @typedef {Object} Bar
       * @property {string[]} things
       */
      
      // having to export an empty object here is annoying, 
      // but required for vscode to pass on your types. 
      export {};
      

      coolFunction.js

      /**
       * This function is super dope
       * @param {import('../typedef').Foo[]} foo - a foo
       * @return {import('../typedef').Bar[]} bar - an array of bars
       */
      
       export function (foo) {
          // do cool things
          return bar;
       }
      

      我也在使用tsd-jsdoc 创建一个types.d.ts 文件,这个实现成功地创建了类型。我在使用 types 文件声明 modulesnamespaces 时遇到了麻烦——只需为上述模型创建独立的 typedefs 对我来说效果最好。

      【讨论】:

        猜你喜欢
        • 2016-04-06
        • 2018-01-06
        • 2018-09-24
        • 2019-08-11
        • 2020-01-06
        • 2018-01-31
        • 2019-10-07
        • 1970-01-01
        • 2019-01-28
        相关资源
        最近更新 更多