如何在SvelteKit的JavaScript+JSDoc中导入模块类型定义？

问题描述 #

我正在SvelteKit应用中尝试通过JSDoc从模块导入类型定义，想要用JS/JSDoc实现下面这段TypeScript代码的类型效果：

import type { PostgreSqlDriver } from '@mikro-orm/postgresql'; // 或其他驱动包

const orm = await MikroORM.init<PostgreSqlDriver>({
  entities: ['./dist/entities'], // JS实体路径（dist），相对于`baseDir`
  entitiesTs: ['./src/entities'], // TS实体路径（src），相对于`baseDir`
  dbName: 'my-db-name',
  type: 'postgresql',
});
console.log(orm.em); // 通过`em`属性访问EntityManager

但我目前的JS代码在VS Code中报错，代码如下：

import { MikroORM } from '@mikro-orm/core';

/** @type {import("@mikro-orm/postgresql").PostgreSqlDriver } */

/** @type {PostgreSqlDriver } */ // Cannot find name 'PostgreSqlDriver'.ts(2304)
export const orm = await MikroORM.init({
    dbName: 'my-db-name',
    type: 'postgresql',
});

需要解决如何正确实现类型定义的导入。

解决方案 #

方法1：直接在返回类型中指定泛型 #

不需要单独声明类型，直接在JSDoc的@type里结合ReturnType和导入类型，给orm指定正确的实例类型：

import { MikroORM } from '@mikro-orm/core';

/**
 * @type {ReturnType<typeof MikroORM.init<import("@mikro-orm/postgresql").PostgreSqlDriver>>}
 */
export const orm = await MikroORM.init({
    dbName: 'my-db-name',
    type: 'postgresql',
});

方法2：先定义类型别名再复用 #

如果需要在多个地方使用PostgreSqlDriver类型，可以先用@typedef定义别名，之后直接引用：

import { MikroORM } from '@mikro-orm/core';

/**
 * @typedef {import("@mikro-orm/postgresql").PostgreSqlDriver} PostgreSqlDriver
 */

/**
 * @type {ReturnType<typeof MikroORM.init<PostgreSqlDriver>>}
 */
export const orm = await MikroORM.init({
    dbName: 'my-db-name',
    type: 'postgresql',
});

关键提示 #

• 单独的@type注释如果没有绑定到变量或用@typedef声明，不会创建可全局引用的类型，所以直接写/** @type {PostgreSqlDriver} */会报错找不到名称。
• ReturnType<typeof MikroORM.init<...>>的作用是获取MikroORM.init方法传入指定泛型后的返回类型，和TS中<PostgreSqlDriver>泛型约束的效果一致。
• 确保已安装@mikro-orm/postgresql依赖，否则类型导入会失败。

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