如何让VS Code识别构造函数注入的类实例并支持跳转？

问题场景 #

我有三个文件：index.js、employee.js、employer.js，代码如下：

index.js #

import Employer from "./employer.js"
import Employee from "./employee.js"

const employer = new Employer();
const employee = new Employee(employer);

employee.js #

class Employee {
  constructor(employer) {
    this.employer = employer;
  }

  getEmployer() {
    return this.employer.name();
  }
}

employer.js #

class Employer {
  name() {
   return "Default Employer";
  }
}

问题：在VS Code中按下CTRL + Click点击employee.js中的employer.name()时，无法跳转到employer.js文件——因为该employer实例并非通过import引入，而是通过构造函数参数传入。在原生JS环境下，有没有办法让VS Code识别employer是Employer类的实例，从而支持跳转？

解决方案 #

可以通过JSDoc类型注解让VS Code的语言服务识别参数类型，具体操作如下：

• 在employee.js的构造函数参数前添加@param注解，明确指定employer的类型为Employer。由于不需要实际执行import，只需通过JSDoc的import()语法引入类型即可：

修改后的employee.js代码：

/**
 * @param {import('./employer.js').default} employer
 */
class Employee {
  constructor(employer) {
    this.employer = employer;
  }

  getEmployer() {
    return this.employer.name();
  }
}

• 如果觉得重复写import('./xxx').default麻烦，也可以在文件顶部用JSDoc的@typedef提前声明类型，后续直接引用：

/**
 * @typedef {import('./employer.js').default} Employer
 */

/**
 * @param {Employer} employer
 */
class Employee {
  constructor(employer) {
    this.employer = employer;
  }

  getEmployer() {
    return this.employer.name();
  }
}

保存修改后，VS Code就能识别this.employer是Employer类的实例，此时按下CTRL + Click点击employer.name()就能直接跳转到employer.js中的name方法。该方案完全基于原生JS，无需引入TypeScript或其他工具。

内容的提问来源于stack exchange，提问作者Teoman shipahi