如何使用 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();