VSCode依赖注入场景下“转到定义”功能失效问题排查

尝试实现依赖注入时，VSCode无法识别代码中的.methodA()这类方法，示例代码如下：

function newServiceA({adapterA,adapterB}) {
  const service = {
    methodA() {
      return 1;
    },
  };
  return service;
}

const adapterA={...}
const adapterB = {...}

const serviceA = newServiceA({adapterA,adapterB});

function controller({ serviceA }) {
  serviceA.methodA(); // VSCode无法识别该方法定义
}

controller({ serviceA });

问题原因 #

VSCode的JavaScript智能提示基于TypeScript语言服务，它无法通过这种动态创建并返回对象字面量的方式，自动推断出serviceA的具体类型结构，因此无法关联到methodA的定义。

解决方案 #

• 添加JSDoc类型注释：通过注释明确标注函数返回值或变量的类型，帮助语言服务识别结构
  给newServiceA添加返回类型注释：

  /**
   * @returns {{ methodA: () => number }}
   */
  function newServiceA({adapterA,adapterB}) {
    const service = {
      methodA() {
        return 1;
      },
    };
    return service;
  }
  

  或者直接给serviceA变量标注类型：

  /** @type {{ methodA: () => number }} */
  const serviceA = newServiceA({adapterA,adapterB});
  

• 改用类定义服务：类的类型结构更明确，VSCode能直接识别其方法

  class ServiceA {
    constructor({adapterA, adapterB}) {
      // 初始化适配器逻辑
    }
    methodA() {
      return 1;
    }
  }
  
  const serviceA = new ServiceA({adapterA, adapterB});
  

• 优化JS配置提升推断能力：在项目根目录创建jsconfig.json，配置TypeScript编译选项增强类型推断

  {
    "compilerOptions": {
      "strict": true,
      "noImplicitAny": false
    },
    "include": ["**/*.js"]
  }
  

内容的提问来源于stack exchange，提问作者Eyal Solomon