VS代码和JSDoc中原型生成的JS代码的语义检验

Question

我正在编写一个Node.js应用程序，它使用Google缓冲区与C#客户端进行通信。

我正在使用官方谷歌的JavaScript编译器与CommonJS风格的导入。最近，我在我的项目中添加了linting，特别是默认的"google“配置。VS代码提供了语义检查(设置ID js/ts.implicitProjectConfig.checkJs)，它与JSDoc相结合，这是google风格所强制的，非常适合在我的应用程序中引入一些类型安全。现在的问题是，我无法让VS代码语义检查与协议缓冲区生成的JS代码一起工作。代码运行良好，因此至少Node了解协议缓冲区代码。

下面是一个小示例代码，index.js，这给我带来了麻烦：

// Alteratively following works for JSDoc as well: /** @typedef { import('./bar').Bar } Bar */
const {Bar} = require('./bar');

// The typedef imports are not working:
// /** @typedef { import('./foo_pb').fooPackage } fooPackage */
// ^ Warns "Namespace ...foo_pb has no exported member fooPackage"
// /** @typedef { import('./foo_pb').Foo } Foo */
// ^ Warns "Namespace ...foo_pb has no exported member Foo"
const fooPackage = require('./foo_pb');

/**
 * @param {Bar} bar
 */
function useBar(bar) {
  bar.printHi();
}

// VS Code warns "Namespace <abspath>/foo_pb has no exported member 'Foo'."
/**
 * @param {fooPackage.Foo} foo
 */
function useFoo(foo) {
  console.log(foo);
}

useBar(new Bar());
// VS Code warns "Property 'Foo' does not exist on type 'typeof import("<abspath>/foo_pb")'."
useFoo(fooPackage.Foo.FOO_OK);

下面是foo.proto文件，它生成了输出foo_pb.js

// foo.proto
syntax = "proto3";

package fooPackage;

enum Foo {
  FOO_UNSPECIFIED = 0;
  FOO_OK = 1;
}

// foo_pb.js
var jspb = require('google-protobuf');
var goog = jspb;
var global = Function('return this')();

goog.exportSymbol('proto.fooPackage.Foo', null, global);
/**
 * @enum {number}
 */
proto.fooPackage.Foo = {
  FOO_UNSPECIFIED: 0,
  FOO_OK: 1
};

goog.object.extend(exports, proto.fooPackage);

下面是在bar.js中使用的index.js，它与我所期望的语义检查一样工作：

/** A Bar class */
class Bar {
  /** Prints hi */
  printHi() {
    console.log('Hi');
  }
}

module.exports = {
  Bar,
};

这是我的，缩写，package.json

{
  "main": "index.js",
  "scripts": {
    "build": "protoc --proto_path=./ --js_out=import_style=commonjs,binary:./ foo.proto",
    "lint": "node_modules/.bin/eslint ./"
  },
  "dependencies": {
    "google-protobuf": "^3.14.0"
  },
  "devDependencies": {
    "eslint": "^7.18.0",
    "eslint-config-google": "^0.14.0"
  }
}

我不清楚这是否与VS代码、谷歌的协议缓冲代码或JSDoc有关，以及TypeScript和闭包是如何发挥作用的。

Answer 1

一个合理的解决方案，我需要使用以下语法：const Foo = require('./foo_pb').Foo;。

VS代码语义检查没有抱怨，但它确实有以下缺点：

• 每个符号必须分别导入，而const fooPackage = require('./foo_pb');则将所有符号导入fooPackage“命名空间”。这实际上是一个好处，因为整个“包括你使用什么”的原则。
• VS Code无法检查这些符号，因此自动完成不会为它们工作--
• Linting可能会在这些进口产品上抱怨no-unused-vars，例如，如果它们只是函数参数。对我来说，一个简单的解决方案是包装那些导入的/* eslint-disable no-unused-vars */块.

仅供参考，这是工作index.js

const {Bar} = require('./bar');

const Foo = require('./foo_pb').Foo;

/**
 * @param {Bar} bar
 */
function useBar(bar) {
  bar.printHi();
}

/**
 * @param {Foo} foo
 */
function useFoo(foo) {
  console.log(foo);
}

useBar(new Bar());
useFoo(Foo.FOO_OK);