如何使用 JSDoc 类型的注释键入导入的 object？

Question

我有以下代码：

// NoteList.server.js

import {prisma} from './db.server'; // how to type this using JSDoc???
import SidebarNote from './SidebarNote';

export default function NoteList({searchText}) {
  const notes = prisma.note.findMany({
    where: {
      title: {
        contains: searchText ?? undefined,
      },
    },
  });

  // Now let's see how the Suspense boundary above lets us not block on this.
  // fetch('http://localhost:4000/sleep/3000');

  return notes.length > 0 ? (
    <ul className="notes-list">
      {notes.map((note) => (
        <li key={note.id}>
          <SidebarNote note={note} />
        </li>
      ))}
    </ul>
  ) : (
    <div className="notes-empty">
      {searchText
        ? `Couldn't find any notes titled "${searchText}".`
        : 'No notes created yet!'}{' '}
    </div>
  );
}

导入的prisma object 是来自我的node_modules的PrismaClient class 的一个实例。 我在那里也有一个index.d.ts ，所以我喜欢输入prisma object 以便在 VS Code 中自动完成。

我知道我可以使用 JSDoc 导入PrismaClient类型，如下所示：

/**
 * @typedef { import("@prisma/client").PrismaClient } PrismaClient
 */

但是，我现在很难在导入时将PrismaClient类型分配给prisma object。 我知道在将类型传递给 function 时如何将类型分配给对象/值：

/**
 * @param {PrismaClient} prisma - My `PrismaClient` instance
 */
function foo(prisma) {
  // I now get autocompletion on the `prisma` instance
  // because VS Code knows it's of type `PrismaClient`
}

但我不知道如何为导入做同样的事情。 谁能帮我吗？ 这是JSDoc 备忘单的链接，以防万一。

编辑：此外，要添加更多信息，从该文件导入prisma实例：

// db.server.js

import {PrismaClient} from 'react-prisma';

export const prisma = new PrismaClient();

您还可以在此处找到包含此示例代码的存储库： https://github.com/prisma/server-components-demo

感谢@Mino的建议，我也在导出时尝试了这个，但我仍然没有得到任何自动完成：

/**
 * @typedef { import("@prisma/client").PrismaClient } PrismaClient
 */
import {PrismaClient} from 'react-prisma';


/**
 * @const {PrismaClient}
 */
export const prisma = new PrismaClient();

Answer 1

你可以分享./db.server的内容，你正在导出prisma object 吗？ 因为如果在该文件中正确输入了导出，则导入应该无需执行任何操作即可工作。

Answer 2

由于@Mino 的建议，我解决了这个问题，而是查看导出 object 的文件，而不是专注于输入导入。 我通过将其添加到db.server.js文件中来获得自动完成功能：

/**
 * @typedef { import("@prisma/client").PrismaClient } PrismaClient
 */
import {PrismaClient} from 'react-prisma';


/**
 * @type {PrismaClient}
 */
export const prisma = new PrismaClient();