How to type an imported object using JSDoc type annonations?

Question

I have the following code:

// 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>
  );
}

The imported prisma object is an instance of the PrismaClient class from my node_modules . I've got an index.d.ts in there as well so I'd love for the prisma object to be typed so that I get autocompletion in VS Code.

I know that I can import the PrismaClient type using JSDoc as follows:

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

However, I struggle to now assign the PrismaClient type to the prisma object upon its import. I know how to assign the type to an object/value when it's passed into a 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`
}

But I don't know how to do the same for an import. Can anyone help me out? Here's a link to the JSDoc cheatsheet in case it helps.

EDIT : Also, to add a bit more info, the prisma instance is imported from this file:

// db.server.js

import {PrismaClient} from 'react-prisma';

export const prisma = new PrismaClient();

You can also find the repo with this sample code here: https://github.com/prisma/server-components-demo

I also tried this upon the export thanks to @Mino's suggestion but I still don't get any autocompletion:

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


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

Answer 1

Can you share the content of ./db.server where you are exporting the prisma object? Because if the export is typed correctly in that file, then the import should work without doing anything.

Answer 2

I solved it thanks to @Mino's suggestion to rather look at the file where the object is exported instead of focusing on typing the import. I get the autocompletion by adding this to the db.server.js file:

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


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