[英]How to type an imported object using JSDoc type annonations?
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
.导入的prisma
object 是来自我的node_modules
的PrismaClient
class 的一个实例。 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.我在那里也有一个index.d.ts
,所以我喜欢输入prisma
object 以便在 VS Code 中自动完成。
I know that I can import the PrismaClient
type using JSDoc as follows:我知道我可以使用 JSDoc 导入PrismaClient
类型,如下所示:
/**
* @typedef { import("@prisma/client").PrismaClient } PrismaClient
*/
However, I struggle to now assign the PrismaClient
type to the prisma
object upon its import.但是,我现在很难在导入时将PrismaClient
类型分配给prisma
object。 I know how to assign the type to an object/value when it's passed into a function:我知道在将类型传递给 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.这是JSDoc 备忘单的链接,以防万一。
EDIT : Also, to add a bit more info, the prisma
instance is imported from this file:编辑:此外,要添加更多信息,从该文件导入prisma
实例:
// 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您还可以在此处找到包含此示例代码的存储库: 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:感谢@Mino的建议,我也在导出时尝试了这个,但我仍然没有得到任何自动完成:
/**
* @typedef { import("@prisma/client").PrismaClient } PrismaClient
*/
import {PrismaClient} from 'react-prisma';
/**
* @const {PrismaClient}
*/
export const prisma = new PrismaClient();
Can you share the content of ./db.server
where you are exporting the prisma
object?你可以分享./db.server
的内容,你正在导出prisma
object 吗? Because if the export is typed correctly in that file, then the import should work without doing anything.因为如果在该文件中正确输入了导出,则导入应该无需执行任何操作即可工作。
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.由于@Mino 的建议,我解决了这个问题,而是查看导出 object 的文件,而不是专注于输入导入。 I get the autocompletion by adding this to the db.server.js
file:我通过将其添加到db.server.js
文件中来获得自动完成功能:
/**
* @typedef { import("@prisma/client").PrismaClient } PrismaClient
*/
import {PrismaClient} from 'react-prisma';
/**
* @type {PrismaClient}
*/
export const prisma = new PrismaClient();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.