如何使用JSDoc引用另一个文件中的普通对象以实现IDE自动补全？

我明白你的问题——你把一个普通对象注入到window后，想让从window取出的变量获得IDE自动补全支持，但之前的JSDoc写法没生效。核心问题是你引用的是对象值而非它的类型，下面是两种可行的解决方案：

方案1：直接为目标变量添加正确的类型提示 #

你只需要修改JSDoc，用typeof来获取原对象的类型即可，因为MySample是一个具体的对象值，不是类或接口类型。修改后的index.js代码如下：

import MySample from "./MySample.js";
let window = {};
function inject($key, $object) {
  window[$key] = $object;
}
inject("MySample", MySample);

/**
 * @type {typeof import('./MySample').MySample}
 */
let my_sample = window.MySample;
console.log(my_sample.findMe()); // 现在IDE应该能自动补全findMe方法了

为什么之前的写法不生效？ #

你之前的@type {import('./MySample').MySample}是直接引用了导出的MySample对象本身，而不是它的类型信息。对于普通对象这种值类型，必须用typeof操作符来提取它的类型，这样IDE才能识别对象上的方法和属性。

方案2：扩展window对象的类型（推荐） #

如果你希望直接通过window.MySample就能获得自动补全，可以扩展window的类型定义，这样整个window对象的属性都会有类型提示：

import MySample from "./MySample.js";

// 先定义原对象的类型别名
/**
 * @typedef {typeof import('./MySample').MySample} MySampleType
 */

// 扩展window的类型，把MySample属性加入进去
/**
 * @type {Window & { MySample?: MySampleType }}
 */
let window = {};

function inject($key, $object) {
  window[$key] = $object;
}
inject("MySample", MySample);

let my_sample = window.MySample;
console.log(my_sample?.findMe()); // 这里同样能获得自动补全

这种方案的好处是，后续任何地方使用window.MySample都能得到类型提示，不需要每次都单独给变量加JSDoc。

内容的提问来源于stack exchange，提问作者M.A.T