如何使用JSDoc从类型声明文件中导入Class类型定义到.js文件？

算力阿峰

2026-9-29

实现JS文件中类的TS类型导入补全方案

前置配置检查

确保项目根目录存在jsconfig.json（纯JS项目）或tsconfig.json（混写项目），且开启以下配置：

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "declaration": true
  },
  "include": ["src/**/*", "types/**/*"] // 要包含你存放类型声明的目录
}

具体实现步骤

1. 编写类的类型声明文件

在单独的类型目录下新建.d.ts声明文件，比如types/classes.d.ts，按照你需要的类结构写类型定义：

// 声明类的类型结构
declare class User {
  // 实例属性
  id: number;
  username: string;
  // 构造函数参数
  constructor(id: number, username: string);
  // 实例方法
  getInfo(): string;
  // 静态属性/方法
  static version: string;
  static createTestUser(): User;
}

export { User };

2. 在JS文件中关联类的类型

通过JSDoc标注将声明的类型和你写的JS类绑定：

// 先导入声明的类型
/** @typedef {import('../types/classes').User} User */

// 给类绑定类型
/** @type {User} */
class User {
  constructor(id, username) {
    this.id = id;
    this.username = username;
  }
  getInfo() {
    return `${this.id}-${this.username}`;
  }
  static version = '1.0.0';
  static createTestUser() {
    return new User(1, 'test');
  }
}

3. 实例自动补全验证

创建类实例时标注类型，即可获得完整的属性、方法补全和类型检查：

/** @type {User} */
const testUser = new User(2, '张三');
// 输入 testUser. 会自动弹出id、username、getInfo的补全提示
// 输入 User. 会自动弹出version、createTestUser的静态成员补全提示